6. Row和Column

1. Row
不灵活水平布局
class MyRowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        RaisedButton(
            onPressed: () {},
            color: Colors.pink,
            child: const Text("粉色按钮")
        ),
        RaisedButton(
            onPressed: () {},
            color: Colors.blue,
            child: const Text("蓝色按钮")
        ),
        RaisedButton(
            onPressed: () {},
            color: Colors.green,
            child: const Text("绿色按钮")
        ),
      ],
      mainAxisAlignment: MainAxisAlignment.spaceAround, // 在主轴的如何摆放
      crossAxisAlignment: CrossAxisAlignment.center, // 纵轴如何排列
    );
  }
}
灵活水平布局

item的外层套一个Expanded(),就可以实现平分空间的布局

/// 横向布局
class MyRowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Expanded(
          child: RaisedButton(
              onPressed: () {}, 
              color: Colors.pink, 
              child: const Text("粉色按钮")
          )
      ),
      Expanded(
          child: RaisedButton(
              onPressed: () {}, 
              color: Colors.blue, 
              child: const Text("蓝色按钮")
          )
      ),
      Expanded(
          child: RaisedButton(
              onPressed: () {},
              color: Colors.green,
              child: const Text("绿色按钮")
          )
      ),
    ]);
  }
}
2. Column
class MyColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: const [
        Text("I am WuMeng"),
        Expanded(child: Text("Who are You")),
        Text("What Can I Dou Fou You")
      ],
    );
  }
}

推荐阅读更多精彩内容

  • flutter中的row控件就是水平控件,它可以让Row里边的子元素进行水平排列。Row控件可以分为灵活排列和非灵...
    忆往昔Code阅读 621评论 0 0
  • row的属性 具体效果看图(图片从网上截取) 水平方向平均分布#### 不灵活水平布局不灵活就是根据Row子元素的...
    冰点雨阅读 75评论 0 0
  • Flutter中的row控件就是水平控件,它可以让Row里边的子元素进行水平排列。 Row控件可以分为灵活排列和非...
    A君小红红阅读 216评论 0 0
  • GitHub之几种布局demo 第01节:水平布局Row的使用 Flutter中的row控件就是水平控件,它可以让...
    红凉梦阅读 994评论 0 2
  • Flutter框架概览 Flutter是什么 是一款移动应用程序SDK,一份代码可以同时生成ios和Android...
    金桔柠檬加冰阅读 367评论 0 0
  • Substrate的transaction-payment模块分析 transaction-payment模块提供...
    建怀阅读 4,198评论 0 4
  • 16宿命:用概率思维提高你的胜算 以前的我是风险厌恶者,不喜欢去冒险,但是人生放弃了冒险,也就放弃了无数的可能。 ...
    yichen大刀阅读 2,060评论 0 1
  • 公元:2019年11月28日19时42分农历:二零一九年 十一月 初三日 戌时干支:己亥乙亥己巳甲戌当月节气:立冬...
    石放阅读 3,455评论 0 2