【Flutter】常用布局容器一

Container

 return Container(
    color: Colors.red,
    child: null,
  ); // 红色块占满全屏
  return Container(
    color: Colors.red,
    child: Text('test block'),
  ); // 红色块包裹文字

以 html box 容器为标准，给容器设置宽高 padding margin

image

 return Container(
  color: Colors.red,
  width: 200,
  height: 200,
  margin: const EdgeInsets.only(left: 30),
  padding: const EdgeInsets.all(30.0),
  alignment: Alignment(1, 0),
  child: Text('text'),
);

padding, margin 不影响设置的宽高

image

然后就是设置 border boxShadow 等

border 通过 decoration 设置, 设置了 decoration 不可以同时设置 color

 return Container(
  width: 200,
  height: 200,
  margin: const EdgeInsets.only(left: 30),
  padding: const EdgeInsets.all(30.0),
  alignment: Alignment(1, 0),
  child: Text('text'),
  decoration: new BoxDecoration(
    color: Colors.red,
    border: Border.all(
      color: Colors.blue,
      width: 2,
      style: BorderStyle.solid
    ),
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(5, 5))]
  ),
);

image

最后是设置 transform

transform: Matrix4.skew(1, 1)

内置的 Matrix4 提供了多种 transform 方法

image

如果需要设置 最大宽高 通过 constraints 设置

constraints: BoxConstraints(
    maxHeight: 300,
    minHeight: 300
)

属性

• alignment 对齐
  设置之后似乎 Container 就占满全屏了

  return Container(
  color: Colors.red,
  alignment: Alignment(0, 0),
  child: Text('text'),
  ); // 全屏 'text' 展示在屏幕中间
  return Container(
  color: Colors.red,
  alignment: Alignment(1, 0),
  child: Text('text'),
  );// 全屏 'text' 展示在屏幕中间偏右

• padding padding

• width 设置容器的宽度

• height 设置容器的高度

• margin margin

• color 设置背景颜色

• decoration 设置 border shadow 等

• foregroundDecoration 设置置灰样式，这个 box 覆盖在组件上方

  foregroundDecoration: new BoxDecoration(
    color: new Color.fromRGBO(0, 0, 0, .2)
  )
  

• transform

• constraints 设置最大宽高

Padding

设置 padding

return Padding(
  padding: EdgeInsets.all(30.0),
  child: Container(
    color: Colors.blue,
  ),
);

Center 子控件在中间

return Center(
  widthFactor: 3,
  heightFactor: 2,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Text('text'),
  ),
);

设置子组件的宽高之后，Center 的宽高由 widthFactor， heightFactor 决定。
centerWidth = childWidth * widthFactor

image

属性

• widthFactor
• heightFactor
• child

Align

可以自定义子控件的位置

return Align(
  alignment: Alignment.topCenter,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

image

return Align(
  alignment: Alignment.center,
  widthFactor: 2,
  heightFactor: 2,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

image

属性

• widthFactor
• heightFactor
• alignment 对齐方式

FittedBox

自适应的布局

return new FittedBox(
  fit: BoxFit.contain,
  alignment: Alignment.center,
  child: new Image.asset(
    'assets/images/title.png',
  ),
);

image

• fit BoxFit.contain

  
  image

image

BoxFit 可以用于图片自适应展示

AspectRatio

固定设备的宽高比

return new AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
);

适用于放置比例固定的图片视频。

image

ConstrainedBox

约束子控件

return new ConstrainedBox(
  constraints: BoxConstraints(
    minHeight: 80,
    maxHeight: 100  
  ),
  child: Container(
    width: 100,
    color: Colors.red,
  ),
); // container 的高度为 100