【自学Flutter】9 Flex布局和 Expanded 的使用

最新推荐文章于 2024-08-23 14:17:40 发布
最新推荐文章于 2024-08-23 14:17:40 发布
阅读量820 收藏
点赞数
分类专栏： 自学Flutter 文章标签： Flutter Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43266090/article/details/93871049
版权

9 Flex布局和 Expanded 的使用

1.源代码
import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  GlobalKey globalKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 50.0,
                        color: Colors.orange,
                      ),
                    ),
                    Spacer(
                      flex: 1,
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        height: 50.0,
                        color: Colors.green,
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 200.0,
                  child: Flex(
                    direction: Axis.vertical,
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Container(
                          height: 50.0,
                          color: Colors.red,
                        ),
                      ),
                      Spacer(
                        flex: 1,
                      ),
                      Expanded(
                        flex: 2,
                        child: Container(
                          height: 50.0,
                          color: Colors.blue,
                        ),
                      )
                    ],
                  ),
                )
              ]
          ),
        )
    );
  }
}
2.解释源代码
import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  GlobalKey globalKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                //Flex布局
                Flex(
                  //Flex布局水平方向
                  direction: Axis.horizontal,
                  children: <Widget>[
                    //Expanded 可以按比例扩伸 Row、Column和Flex 子widget所占用的空间
                    Expanded(
                      //占用比例
                      flex: 1,
                      child: Container(
                        height: 50.0,
                        color: Colors.orange,
                      ),
                    ),
                    //Spacer 占用指定比例的空间
                    Spacer(
                      flex: 1,
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        height: 50.0,
                        color: Colors.green,
                      ),
                    )
                  ],
                ),
                //限制高度
                SizedBox(
                  height: 200.0,
                  child: Flex(
                    //Flex布局垂直方向
                    direction: Axis.vertical,
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Container(
                          height: 50.0,
                          color: Colors.red,
                        ),
                      ),
                      Spacer(
                        flex: 1,
                      ),
                      Expanded(
                        flex: 2,
                        child: Container(
                          height: 50.0,
                          color: Colors.blue,
                        ),
                      )
                    ],
                  ),
                )
              ]
          ),
        )
    );
  }
}
3.效果图

效果图

技术宅-Nopi
关注
专栏目录
写给前端工程师的 Flutter 详细教程
onghaha的博客
04-19 833
可以看到一个有状态的组件需要两个Class，这样写的原因在于，Flutter中Widget都是immmutable的，状态组件的状态保存在State中，组件仍然每次重新创建，Widget在这里只是一种对组件的描述，Flutter会diff转换成Element，然后转换成RenderObject才渲染。可以很方便的管理组件内的数据，但是Flutter中状态同样是从上往下流转的，因此也会遇到和React中同样的问题，如果组件树太深，逐层状态创建就显得很麻烦了，更不要说代码的易读和易维护性了。
Flutter 中 Flexible、Expanded、Spacer 的使用技巧详解 _ Flutter Widgets(1)
2401_84149256的博客
04-17 1255
由于题目很多整理答案的工作量太大，所以仅限于提供知识点，详细的很多问题和参考答案我都整理成了 PDF文件《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！图片转存中…(img-qghHXni2-1713309126104)][外链图片转存中…(img-W4ZXUd2j-1713309126105)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
Flutter布局组件之弹性布局组件Flex和Expanded
m0_46369686的博客
03-10 693
弹性布局Flex 弹性布局允许子组件按照一定比例来分配父容器空间。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。 Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和E...
Flutter Widgets 之 Expanded和Flexible
Dream It Possible
06-05 3097
Expanded和Flexible是控制Row、Column、Flex的子控件如何布局的控件，Expanded和Flexible可以扩张填满主轴剩余空间，如何确认主轴和交叉轴可以查看Flutter Widgets 之 Row和Column，这篇文章详细介绍了主轴和交叉轴。首先看一下Expanded和Flexible的构造函数：区别如下 - Expanded 继承自Flexible。 - Flexible 中参数默认是，而Expanded固定为。因此如果在使用Flexible时，设置为，Flexible和Ex
Flutter 10 Flex布局
最新发布
sziitjin的博客
08-23 1152
将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度基础上按照 spaceBetween 的方式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范围内按照 spaceBetween 的方式进行排列。设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。Expanded和Flexible。
Flutter灵活布局要掌握的两个控件Expanded和Flexible
江上清风山间明月的博客
06-03 1262
在Flutter中，Expanded和Flexible是两个用于控制子组件尺寸的Widget，它们都可以用于实现灵活的布局。Expanded Widget会自动将子组件的尺寸扩展到父组件剩余的空间，而 Flexible Widget 则会自动调整子组件的尺寸以适应父组件的尺寸。具体来说，Expanded Widget 会尽可能地扩展子组件的大小，以使其占据父组件的所有可用空间。如果需要控制子组件的最大和最小尺寸，可以使用Expanded的child属性，将子组件包装在一个ConstrainedBox中。
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
手写我对你的温柔
05-13 4321
用Android原生实现流式布局【实现例如app的很多标签】需要自定义View继承自ViewGroup，然后代码量也不小。 相关自定义View实现流式布局，请参考这位老兄的博客： https://blog.csdn.net/u013107751/article/details/81701606 或者慕课网上的android免费课程有一门课是专门实现自定义流式布局的。 而在Flutter中...
Flutter 多子 Widget 布局之Flex、Expanded、Wrap、Flow
龙衣
03-22 1214
文章目录弹性布局 Flex、ExpandedFlexExpanded流式布局 Wrap、FlowWrapFlow 上文 Flutter 多子 Widget 布局 图文示例（一），介绍了Row、Column这两个组件，查看源码发现他俩都是继承了Flex widget，这篇来学习学习弹性布局Flex，Explanded 弹性布局 Flex、Expanded Flex 表示弹性，Expanded 表示...
Flutter 中 Flexible、Expanded、Spacer 的使用技巧详解 _ Flutter Widgets
2401_84023683的博客
04-11 1091
我的面试经验分享可能不会去罗列太多的具体题目，因为我依然认为面试经验中最宝贵的不是那一个个具体的题目或者具体的答案，而是结束面试时，那一刻你的感受以及多天之后你的回味~很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，对此我整理了一些资料，需要的可以免费分享给大家在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含。
Flutter自动换行和两列布局（1，GitHub已标星16k
2401_84023579的博客
03-31 1175
只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图[外链图片转存中…(img-IBLh5nA4-1711886861346)]
Flutter自动换行和两列布局（1）
m0_74931244的博客
04-17 921
,),在垂直方向上内容超出纵轴空间，flutter提示如下错误：横轴呢？@overrideRow(],),],),),同样也会报错：Row和Column都是Flex组件：它们所有的子元素都会布局在一个方向它们不能滚动，所以当内容超出可用范围，flutter就会报错。
Flutter-Flex的使用说明
01-20
Flutter-Flex的使用说明 flex也属于一种布局方式，在使用上有点类似于Row、Column；不仅可以进行水平方向的布局，还可以进行垂直方向的布局；布局方式的改变通过direction这个属性。 flex的定义 flex的定义： Flex({ Key key, @required this.direction,//设置flex是在水平方向上设置 List children = const [],//一组子widgets this.mainAxisAlignment = MainAxisAlignment.start, this.mai
【Flutter】十三、Flutter中常用的布局容器——弹性布局Flex、Expanded
MAXLZ的博客
10-12 996
一、Flex1.1 构造函数二、Expanded     弹性布局允许子widget按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现。 一、Flex Flex可沿着水平或竖直方向对widget进行布局。 1.1 构造函数 Flex({ Key key, @required this.direction, // 主轴方向：Ax...
【自学Flutter】9 Flex布局和 Expanded 的使用，深度好文
m0_60388261的博客
03-28 314
文章会持续更新的。绝对干货！！！Android进阶学习全套手册关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。
flutter使用Flex,Expanded时，约束问题(constraintsError)
weixin_44539199的博客
12-27 424
Flex Expanded 约束问题 constraintsError
Flutter之Flex组件布局
z001126的博客
04-08 766
【代码】Flutter之Flex组件布局。
Flutter 布局（七）- Row、Column详解
2401_84123171的博客
04-09 1236
其中spaceAround、spaceBetween以及spaceEvenly的区别，就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。：在主轴方向占有空间的值，默认是max。：children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。：阿拉伯语系的兼容设置，一般无需处理。：定义了children摆放顺序，默认是down。top对应Row以及Column的话，就是左边和顶部，bottom的话，则是右边和底部。
【Flutter -- 进阶】JSON 数据
Kevin Learn Android
07-23 1815
现在很难想象移动应用程序不需要与后台交互或者存储结构化数据。现在开发，数据传输方式基本都是用 `JSON`，在 Flutter 中是没有`GSON/Jackson/Moshi`这些库，因为这些库需要运行时反射，在 Flutter 是禁用的。...
flutter flex布局
05-09
Flutter中的Flex布局是一种弹性布局模型，它可以让子元素按照一定的比例分配父容器的可用空间。Flex布局主要包含三个组件：Flex、Flexible和Expanded。 1. Flex Flex是一个容器组件，它可以将子组件按照一定的比例排列。Flex有两个属性：direction和mainAxisAlignment，其中direction表示子组件排列的方向，默认为水平方向，mainAxisAlignment表示子组件在主轴上的对齐方式。 2. Flexible Flexible是一个伸缩组件，它可以根据父容器的可用空间来调整自身的尺寸。Flexible有三个属性：flex、fit和child，其中flex表示子组件的比例，fit表示子组件在可用空间不足时的适应方式，child表示子组件。 3. Expanded Expanded是Flexible的一种特殊情况，它的flex属性默认为1。使用Expanded可以让子组件占据父容器剩余的所有空间。 下面是一个简单的Flex布局示例： ``` Flex( direction: Axis.horizontal, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Flexible( flex: 1, fit: FlexFit.tight, child: Container( height: 50, color: Colors.red, ), ), Flexible( flex: 2, fit: FlexFit.loose, child: Container( height: 50, color: Colors.blue, ), ), Expanded( child: Container( height: 50, color: Colors.green, ), ), ], ) ``` 在这个示例中，我们创建了一个水平方向的Flex容器，其中有三个子组件。第一个子组件使用了Flexible，它的flex属性为1，表示占据1/3的空间；第二个子组件也使用了Flexible，它的flex属性为2，表示占据2/3的空间；第三个子组件使用了Expanded，它会占据剩余的所有空间。在这个示例中，第一个子组件使用了tight适应方式，它会尽可能地占据可用空间；第二个子组件使用了loose适应方式，它会根据自身的尺寸来调整大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值