Flutter中Flexible和Expanded区别

在官网的介绍中感觉说的很模糊：

Flexible：Flexible是一个控制Row、Column、Flex等子组件如何布局的组件，Flexible 组件可以控制 Row、Column、Flex 的子控件占满父组件，比如，Row 中有3个子组件，两边的宽是100，中间的占满剩余的空间
Expanded：Expanded 继承字 Flexible，fit 参数固定为 FlexFit.tight，也就是说 Expanded 必须（强制）填满剩余空间

首先看下他们的构造：

Flexible

 const Flexible({Key? key,this.flex = 1,this.fit = FlexFit.loose,required Widget child,}) : super(key: key, child: child);

Expanded

  const Expanded({Key? key,int flex = 1,required Widget child,}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);

构造中看出他们的 FlexFit 参数是不同的

FlexFit是个枚举类型

///
///  * [RenderFlex], the flex render object.
///  * [Column], [Row], and [Flex], the flex widgets.
///  * [Expanded], the widget equivalent of [tight].
///  * [Flexible], the widget equivalent of [loose].
enum FlexFit {/// The child is forced to fill the available space.////// The [Expanded] widget assigns this kind of [FlexFit] to its child.tight,/// The child can be at most as large as the available space (but is/// allowed to be smaller).////// The [Flexible] widget assigns this kind of [FlexFit] to its child.loose,
}

tight: 必须强制填满剩余空间
loose: 尽可能大的填满剩余空间，但是可以不填满

这就可以看出在填充方式上两者是不同的

Flexible与Expanded都是具有权重属性的组件 ,都可以控制Row、Column、Flex的子组件(children)如何布局的控件
Flexible可控制子组件布局是否充满剩余空间,依靠fit枚举参数控制(默认loose不填满),

Expanded继承了Flexible 在构造函数内强制设置 fit参数为tight填满剩余空间
Flexible的loose参数表示子控件最多可以达到可用的大小，允许更小
自由度Flexible更高，填满剩余空间直接使用Expanded更方便。

如下图所示Flexible可以不撑满剩余布局

示例如下：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue, splashColor: Colors.transparent),home: HomePage(),);}
}class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("布局测试"),),body:Column(children: [buildFlexible(),SizedBox(height: 10,),buildExpanded()],));}Widget buildFlexible() {returnContainer(color: Colors.blueAccent,child: Row(children: [Container(color: Colors.yellow,height: 50,width: 100,),Flexible(child: Container(color: Colors.green,height: 50,child: Text("这是Flexible",style: TextStyle(color: Colors.white),),)),Container(color: Colors.red,height: 150,width: 100,)],),);}Widget buildExpanded() {returnContainer(color: Colors.blueAccent,child: Row(children: [Container(color: Colors.yellow,height: 50,width: 100,),Expanded(child: Container(alignment: Alignment.center,color: Colors.green,height: 50,child: Text("这是Expanded",style: TextStyle(color: Colors.white),),)),Container(color: Colors.red,height: 150,width: 100,)],),);}
}

Flutter中Flexible和Expanded区别相关推荐

flutter的Flexible和 Expanded的区别
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 flutter中网络请求dio使用分析视频教程在这里 Flutter 从入门实践到开发一个APP之UI基础 ...
flutter控件Flexible和 Expanded的区别
Flexible和 Expanded的区别是: Flexible是一个控制Row.Column.Flex等子组件如何布局的组件. Flexible组件可以使Row.Column.Flex等子组件在主轴 ...
Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]
Flutter 中 stateless 和 stateful widget 的区别介绍要在 Flutter 中构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序的构建块.F ...
Flutter中Stateless和Stateful的区别
Flutter中Stateless和Stateful的区别实现Flutter app时,我们用widgets来构建app的UI.这些widgets有两种类型--statefule(有状态) 和 st ...
Flutter中Padding、Row 、Column 、Expanded 组件详解
1. Paddiing 组件在 html 中常见的布局标签都可以使用 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属性,这个时候我们可以用 Paddi ...
Flutter中Row中的子控件左右两端对齐
Flutter中Row中的子控件左右两端对齐 Container(// padding: EdgeInsets.only(left: 20, right: 20),margin: EdgeInsets ...
Flutter第一部分（UI）第二篇：在Flutter中构建布局
前言:Flutter系列的文章我应该会持续更新至少一个月左右,从User Interface(UI)到数据相关(文件.数据库.网络)再到Flutter进阶(平台特定代码编写.测试.插件开发等),欢迎感 ...
Flutter中的Wrap
我们在flutter中使用能够包含多个child的widget的时候,经常会遇到超出边界范围的情况,尤其是在Column和Row的情况下,那么我们有没有什么好的解决办法呢?答案就是今天我们要讲解的Wr ...
官方文档——一篇文章弄懂Flutter中的布局
来自Flutter中文资源主页https://flutter.cn/ 原文:https://flutter.cn/docs/development/ui/layout Flutter 中的布局要点 ...

Flutter中Flexible和Expanded区别

Flutter中Flexible和Expanded区别

在官网的介绍中感觉说的很模糊：

首先看下他们的构造：

构造中看出他们的 FlexFit 参数是不同的

如下图所示Flexible可以不撑满剩余布局

Flutter中Flexible和Expanded区别相关推荐

最新文章

热门文章