首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Flutter中Row中的子控件左右两端对齐

Flutter中Row中的子控件左右两端对齐

原创
作者头像
徐建国
修改2021-08-02 10:32:56
修改2021-08-02 10:32:56
2.3K0
举报
文章被收录于专栏:个人路线个人路线

Flutter中Row中的子控件左右两端对齐

代码语言:javascript
复制
Container(
          // padding: EdgeInsets.only(left: 20, right: 20),
          margin: EdgeInsets.only(top: 20, left: 20, right: 20),
          width: 500,
          height: 500,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5), color: Colors.blue),
          child: Column(
            children: [
              //第一种 利用expanded
              Container(
                color: Color(0xFFF6F6F6),
                height: 50,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("名称"),
                    Expanded(
                      child: Container(
                          alignment: Alignment.topRight,
                          child: Text("Expanded")),
                    )
                  ],
                ),
              ),
              //第二种用 row 的熟悉属性
              Container(
                 color: Color(0xFFF6F6F6),
                height: 50,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    new Text("名称"),
                    new Text("spaceBetween"),
                  ],
                ),
              ),
              //第三种 spacer
              Container(
                child: new Row(
                  children: [
                    new Text("名称"),
                    Spacer(),
                    new Text("Spacer"),
                  ],
                ),
              ),
              // //第四种 Flexible
              Container(
                child: new Row(
                  children: [
                    new Text("名称"),
                    Flexible(fit: FlexFit.tight, child: SizedBox()),
                    new Text("Flexible"),
                  ],
                ),
              ),
            ],
          ),
        )

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Flutter中Row中的子控件左右两端对齐
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档