常用元素

Container

  Container(
    alignment: Alignment.topLeft, //child的对齐方式,topLeft表示纵向靠上,横向靠左
    width: 150, //指定宽度则以宽度显示，不指定则被内容撑开
    height: 150,
    padding: EdgeInsets.all(16),//4个方向相同的内边距
    margin: EdgeInsets.zero, //4个方向的外边距为0
    // color: Colors.grey, //背景颜色, 不可与Container.decoration同时存在
    decoration: BoxDecoration(
      color: Colors.red, //背景颜色
      border: Border.all(color: Colors.yellow, width: 3), //边框
      gradient: LinearGradient(colors: [Colors.red,Colors.blue]), //类型:Gradient? 背景渐变色,设置后color失效
      // image: DecorationImage(image: image), //背景图片

      borderRadius: BorderRadius.circular(75), //圆角
      shape: BoxShape.rectangle, // 形状, circle圆,rectangle矩形

      boxShadow: [BoxShadow(blurRadius: 3, color: Colors.yellow),BoxShadow(blurRadius: 10, color: Colors.red)], //阴影
      backgroundBlendMode: BlendMode.darken //混合模式
    ),
    child: Text("666"),
  )

SizedBox

一个可以设置宽高的盒子容器

Stack和Positioned

将所有子元素堆叠在一起（像CSS中给所有子元素设置了position: absolute;），再用Positioned给每个子元素定位

Stack(
              alignment: AlignmentDirectional.topStart,
              textDirection: TextDirection.ltr,
              fit: StackFit.loose,
              clipBehavior: Clip.hardEdge,
              children: [
                Positioned(left: 10, bottom: 0, child: Text("text content1")),
                Positioned(right: 0, top: 0, child: FilledButton.tonal(onPressed: (){}, child: Text("按纽"))
                )
              ]
            )

GestureDetector

使得子元素可以接收拖拽、缩放、长按、点击等指针事件

Align

Align(
  alignment: Alignment(1,0), //偏移量，0,0表示xy位置保持不动。x=1表示child的右边对齐Align右边，x=-1表示child的左边对齐Align的左边;y的原理一样
  widthFactor: double.infinity, //1表示child应有的最小宽度,2表示child宽度x2，double.infinity表示设为父元素允许的最大宽度
  heightFactor: 8,//1表示child原本应有的高度,2表示child高度*2
  child: Text("6666", style: TextStyle(backgroundColor: Colors.yellow))
)

Padding

          Padding(
            // padding: EdgeInsets.all(15),
            padding: EdgeInsets.symmetric(vertical: 15, horizontal: 20),
            child: Text(""),
          )