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"),
                  ],
                ),
              ),
            ],
          ),
        )
相关文章
|
Android开发 iOS开发 容器
Flutter控件封装之轮播图Banner
Flutter中实现轮播图的方式有很多种,比如使用三方flutter_swiper,card_swiper等等,使用这些三方,可以很快很方便的实现一个轮播图展示,基本上也能满足我们日常的开发需求,如果说,想要一些定制化的操作,那么就不得不去更改源码或者自己自定义一个,自己定义的话,Flutter中提供了原生组件PageView,可以使用它很方便的来实现一个轮播图。
266 0
关于 Flutter中的TextFiled不可以直接在Row中使用的问题
TextFiled不可以直接在Row中使用的问题,报错简单修改方法
|
12天前
|
移动开发 UED 容器
Flutter-自定义可展开文本控件
Flutter-自定义可展开文本控件
13 0
|
12天前
Flutter-自定义三角形评分控件
Flutter-自定义三角形评分控件
12 0
|
12天前
flutter- Row Column Expanded ListView
flutter- Row Column Expanded ListView
|
24天前
Flutter 一行Row中显示RadioListTile
Flutter 一行Row中显示RadioListTile
8 0
|
2月前
Flutter StatefulWidget传递数据,多级控件传递数据
Flutter StatefulWidget传递数据,多级控件传递数据 在Flutter中,StatefulWidget可以通过构造函数将数据传递给其子控件,这种方式适用于一些简单的场景。但是,当存在多级嵌套控件时,将数据从祖先传递到后代可能会变得困难。在这种情况下,可以使用Flutter提供的InheritedWidget类来传递数据。
Flutter的ClipRRect控件介绍
ClipRRect(Rounded Rectangle Clip)是Flutter中的一个控件,用于将其子控件剪裁为圆角矩形形状。
|
API Android开发
Flutter控件封装之视频进度条
视频控制器,三方所提供的样式,有时很难满足我们的需求,对于此情况,我们不得不在此基础上自行封装,今天所分享的文章就是一个很简单的控制器封装案例,包含了基本的播放暂停,全屏和退出全屏,以及时间和进度的展示,封装了事件回调以及各个属性的控制,基本上可以满足大部分的业务需求,即便不满足,大家也可以在此基础之上拓展。
207 0
|
Android开发 UED
Flutter控件之Tab选项卡封装
Tab选项卡,这是一个非常常见且权重很高的一个组件,随便打开一个App,比如掘金,如下图,首页顶部就是一个Tab选项卡,这个功能可以说,几乎每个App都会存在。
194 0