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

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

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

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"),
                  ],
                ),
              ),
            ],
          ),
        )
目录
打赏
0
0
0
0
73
分享
相关文章
Flutter控件封装之轮播图Banner
Flutter中实现轮播图的方式有很多种,比如使用三方flutter_swiper,card_swiper等等,使用这些三方,可以很快很方便的实现一个轮播图展示,基本上也能满足我们日常的开发需求,如果说,想要一些定制化的操作,那么就不得不去更改源码或者自己自定义一个,自己定义的话,Flutter中提供了原生组件PageView,可以使用它很方便的来实现一个轮播图。
463 0
关于 Flutter中的TextFiled不可以直接在Row中使用的问题
TextFiled不可以直接在Row中使用的问题,报错简单修改方法
Flutter控件的显示与隐藏
Flutter控件的显示与隐藏
301 3
如何将JSF应用送上云端?揭秘在Google Cloud Platform上部署JSF应用的神秘步骤
【8月更文挑战第31天】本文详细介绍如何在Google Cloud Platform (GCP) 上部署JavaServer Faces (JSF) 应用。首先,确保已准备好JSF应用并通过Maven构建WAR包。接着,使用Google Cloud SDK登录并配置GCP环境。然后,创建`app.yaml`文件以配置Google App Engine,并使用`gcloud app deploy`命令完成部署。最后,通过`gcloud app browse`访问应用,并利用GCP的监控和日志服务进行管理和故障排查。整个过程简单高效,帮助开发者轻松部署和管理JSF应用。
99 0
Flutter-自定义可展开文本控件
Flutter-自定义可展开文本控件
152 0
|
9月前
Flutter-自定义三角形评分控件
Flutter-自定义三角形评分控件
91 0
|
9月前
flutter- Row Column Expanded ListView
flutter- Row Column Expanded ListView
|
10月前
Flutter 一行Row中显示RadioListTile
Flutter 一行Row中显示RadioListTile
161 0
|
11月前
Flutter StatefulWidget传递数据,多级控件传递数据
Flutter StatefulWidget传递数据,多级控件传递数据 在Flutter中,StatefulWidget可以通过构造函数将数据传递给其子控件,这种方式适用于一些简单的场景。但是,当存在多级嵌套控件时,将数据从祖先传递到后代可能会变得困难。在这种情况下,可以使用Flutter提供的InheritedWidget类来传递数据。
146 0
Flutter的ClipRRect控件介绍
ClipRRect(Rounded Rectangle Clip)是Flutter中的一个控件,用于将其子控件剪裁为圆角矩形形状。

热门文章

最新文章

  • 1
    ClkLog埋点分析系统-Flutter埋点上报攻略
    36
  • 2
    Flutter敏感词过滤实战:基于AC自动机的高效解决方案
    196
  • 3
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    62
  • 4
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    71
  • 5
    通过外部链接启动 Flutter App(详细介绍及示例)
    59
  • 6
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    289
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    151
  • 8
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    94
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    208
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    72
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等