expanded是什么意思？基础布局Widgets之Expanded详解

大家好，今天给各位分享expanded是什么意思的一些知识，其中也会对基础布局Widgets之Expanded详解进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

Expanded是用于展开Row，Column或Flex的子child的Widget。使用Expanded可以使[Row]，[Column]或[Flex]的子项扩展以填充主轴中的可用空间（例如，水平用[Row]或垂直用[Column]）。如果扩展了多个子节点，则根据[flex]因子将可用空间划分为多个子节点。

[Expanded]小部件必须是[Row]，[Column]或[Flex]的后代，并且从[Expanded]小部件到其封闭的[Row]，[Column]或[Flex]的路径必须包含只有[StatelessWidget]或[StatefulWidget]s（不是其他类型的小部件，如[RenderObjectWidget]）。

使用场景比如在之前的demo中用到的，列表单词和按钮的空白处理，可以利用expanded对各个widgets合理分配弹性空间，而不是用positioned这样的固定widget位置的方式分配，其关键分配参数就是Flex。

constExpanded({\nKeykey,\nintflex=1,\n@requiredWidgetchild,\n})\nflex分配空间的弹性系数，Row，Column或Flex的每个Expanded的flex构成空间分配的比例，默认intflex=1child即需要分配的子Widget

示例代码

//expand\nimport'package:flutter/material.dart';\nclassExpandedLearnextendsStatelessWidget{\n@override\nWidgetbuild(BuildContextcontext){\nreturnnewScaffold(\nappBar:AppBar(\ntitle:Text('Expand')\n),\nbody:Row(children:<Widget>[\n//根据flex系数，分配剩余空间\nExpanded(\nflex:2,\nchild:Container(\ndecoration:BoxDecoration(\nborderRadius:BorderRadius.circular(20),\ngradient:LinearGradient(colors:[Colors.blue,Colors.purple]),\n),\n)\n),\nExpanded(\nflex:1,\nchild:Container(\ndecoration:BoxDecoration(\nborderRadius:BorderRadius.circular(20),\ngradient:LinearGradient(colors:[Colors.red,Colors.orange]),\n),\n)\n)\n],\n)\n);\n}\n}\n

示例效果

A63D8B78EEDFE82421521740EFBDA185.png

关于expanded是什么意思到此分享完毕，希望能帮助到您。