美文网首页
Flutter 学习:流布局组件Wrap 、按钮组件Raised

Flutter 学习:流布局组件Wrap 、按钮组件Raised

作者: __素颜__ | 来源:发表于2020-04-15 21:15 被阅读0次
    一.复习上一节

    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: <Widget>[
          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: [] )

    相关文章

      网友评论

          本文标题:Flutter 学习:流布局组件Wrap 、按钮组件Raised

          本文链接:https://www.haomeiwen.com/subject/mcbcvhtx.html