第一百二十四回 Flexible组件

我们在上一章回中介绍了扩展内容相关的知识，本章回中将介绍 Flexible组件.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在前面章回中介绍了扩展列表相关的内容，当页面中其它组件和扩展列表一起使用时，扩展列表有可能会超过屏幕大小，此时可以在扩展列表外层嵌套一个滚动组件(ScrollView)形成局部列表。或者嵌套一个Flexible组件,该组件的功能和滚动组件类似，只不过不能滚动其中的内容。它本质上是一种容器类组件，可以通过属性来控制容器占用屏幕的空间大小，类似Android开发中的百分比布局或者约束布局中的百分比属性。本章回中将详细介绍它的使用方法。

使用方法

和其它的Widget类似，Flexible组件提供了相关的属性来控制自己，下面是常用的属性：

• flex属性：用来控制组件占用屏幕空间的比例,它是可选属性，默认值为1;
• child属性：用来存放被包含的组件，相当于容器中的内容；

Flexible组件的属性不多，我们重点说一下flex属性，它类似于android布局属性中的weight属性，默认值为1表示占满整个屏幕空间，只有多个Flexible组件在一起时才能突出它的效果。稍后我们将在代码中演示；

示例代码

  _listView = ListView(
    children: const [
      ListTile(title: Text("item 1"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
      ListTile(title: Text("item 2"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
      ListTile(title: Text("item 3"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
    ],
  );

  Flexible(
    ///用来控制容器占用的比例
    flex: 2,
    child: _listView,
  ),
  Flexib`le(
    child: _listView,
  ),

上面示例代码中包含两个Flexible组件，它们的flex属性值分别是2和1(默认值)，由此可以推断出：

• 当前页面被分成三份；
• 第一个Flexible组件占用三分之二的页面空间；
• 第二个Flexible组件占用三分之一的页面空间；

我在这里就演示程序的运行结果了，建议大家自己动手去实践。

看官们，与"Flexible组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!