Flutter布局-AspectRatio组件

AspectRatio的作用是根据设置调整子元素child的宽高比

名称	说明
AspectRatio	宽高比，最终可能不会根据这个值去布局，具体则要看综合因素。外层是否允许按照这种比率进行布局，这只是一个参考值
child	子组件

dart

AspectRatio(
      aspectRatio: 2.0 / 1.0,
      child: Container(
        color: Colors.red,
      ),
    );

Flutter布局-Card 组件

card 默认右圆角和阴影，让啊看起来有立体感

名称	说明
margin	外边距
child	子组件
Shape	Card的阴影效果，默认的阴影效果为圆角的长方形边
elevation	Card的阴影范围

dart

Card(
   margin: EdgeInsets.all(4.0),
   elevation: 2.0,
   shape: const RoundedRectangleBorder(
     borderRadius: BorderRadius.all(Radius.circular(14.0)),
   ),
   child: Column(
     children: <Widget>[
       Text('qwe'),
       Text('qwe'),
     ],
   ),
 ),

Flutter布局-wrap组件

wrap可以实现流布局，x轴空间不足时，则换行显示

名称	说明
direction	主轴的方向，默认水平
alignment	主轴的对齐方式
spacing	主轴方向上的间距
runSpacing	run的间距
textDirection	文本方向
verticalDirection	定义了children拜访顺序，默认是down，见flex相关属性介绍
runAlignment	run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行

dart

class MyWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      runSpacing: 10,
      spacing: 10,
      children: <Widget>[
        MyButton('1111'),
        MyButton('1111'),
        MyButton('1111'),
        MyButton('1111'),
        MyButton('1111'),
        MyButton('1111'),
        MyButton('1111'),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;
  const MyButton(this.text, {Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
      child: Text('xxx'),
    );
  }
}