小菜鸡开始学习flutter之二十六

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

今日目标

今天来学习了解下Wrap布局组件。

Wrap

Wrap可以实现流布局，单行的wrap跟row表现几乎是一样的，单例的wrap则跟column表现几乎一样，但row和column都是单行单列的，wrap则可以突破这个限制，mainAxis上空间不足时，则向crossAxis上去扩展显示。

组件属性

属性	说明
direction	设置主轴的方向，默认时水平
alignment	主轴的对齐方式
spacing	主轴上的间距
textDirection	文本方向
verticalDirection	定义children摆放顺序，默认时down
runAlignment	run的对齐方式，run可以理解为新的行为或者列，如果时水平方向布局的话，run可以理解为新的一行。
runSpacing	run的间距

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10.0,
      runSpacing: 1.0,
      children: [
        MyButton('anniu '),
        MyButton('anniu123 '),
        MyButton('anniu234 '),
        MyButton('anniu 444'),
        MyButton('anniu1232 '),
        MyButton('anniu123 3'),
        MyButton('anniu234 '),
        MyButton('anniu 444'),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;

  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ElevatedButton(onPressed: () {}, child: Text(this.text));
  }
}

可以看到放不下的组件被自动换行了，如果我们用column或者row的话会是什么情况呢?

可以看到并没有自动换行，相应的在超出区域尾部有类似斜斑马线的格子提示开发者，内容超出了屏幕的宽度。

同时我们还学习使用了ElevatedButton按钮组件，老版本的raiseButton已经被弃用

\

至此我们大部分的布局组件都已经接触过了，相信大家可以自己写一些好看的布局出来了，勤能补拙，大家不要忘了多多练习哦~毕竟app的布局美观还是很重要的。

ending

持续学习~~ 如有不正确的地方还请指正，谢谢~~