Flutter 学习：流布局组件Wrap 、按钮组件RaisedButton

一.复习上一节

1.AspectRation组件设置子元素的宽高比
AspectRatio(aspectRatio: , child: )

2.Card 卡片布局自带阴影
Card( child: )

二.RaisedButton组件

• Flutter 中通过RaisedButton定义一个按钮

• 常用属性

  child :子元素
  onPressed:点击事件

• 代码

RaisedButton(child: Text("我是一个button"), onPressed: () {});

三.Wrap组件

• Wrap可以实现流布局

• 常用参数

direction: 主轴方向，默认水平
alignment: 主轴的对其方式
textDirection: 主轴方向上的间距
verticalDirection: child的摆放顺序，默认是down
runAlignment: run的对齐方式，run可以理解为新的行或者列
runSpacing: run的间距

• 代码

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(spacing: 10, children: [
      MyButton("第一个1"),
      MyButton("第二个"),
      MyButton("第三个2"),
      MyButton("第四个4"),
      MyButton("第五个"),
      MyButton("第六个"),
      MyButton("第七个6"),
      MyButton("第八个"),
      MyButton("第九个"),
    ],);
  }
}

class MyButton extends StatelessWidget {
  String number;

  MyButton(this.number)

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
        child: Text(this.number), textColor: Colors.pink, onPressed: () {});
  }
}

• 效果图

image.png

四.总结

1.RaisedButton按钮组件
RaisedButton(child: , onPressed: () {})

2.Wrap 流布局组件
Wrap( child: [] )