【flutter】Expanded组件移动开发devnn的专栏-

Expanded组件是flutter中使用率很高的一个组件，它可以动态调整child组件沿主轴的尺寸，比如填充剩余空间，比如设置尺寸比例。它常常和Row或Column组合起来使用。

构造函数

const Expanded( {Key key, int flex: 1, @required Widget child} ) 

它除了child之外，有一个flex属性比较常用。flex表示弹性系数，默认是1。

下面结合Row来实验Expanded的用法。

示例一：当Row中的组件不使用Expanded的时候

import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(     home: Scaffold(         appBar: AppBar(title: Text("Row demo")),         body: Container(             color: Colors.green,             child: Row(children: <Widget>[               Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, ),               Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, ),               Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, ) ]))))); 

运行效果：

如果不明白为什么会这样，请参阅我的另一篇文章 flutter Row和Column组件

示例二：将Row中的第一个组件使用Expanded包裹

import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(     home: Scaffold(         appBar: AppBar(title: Text("Row demo")),         body: Container(             color: Colors.green,             child: Row(children: <Widget>[ Expanded(                   child: Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, )),               Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, ),               Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, ) ]))))); 

运行效果：

可以看到，将第一个组件使用Expanded包裹后，第一个组件设置的width会无效，并且它在主轴方向变大，直到填充剩余空间，但在纵轴方向上并没有变大，依然维持自身的height。

第一个图像因为设置了 fit: BoxFit.cover，所以会被裁剪。BoxFit.cover表示图像填充组件，多余的进行裁剪处理。

示例三：使用Expanded实现Row中所有组件平均分配剩余空间

import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(     home: Scaffold(         appBar: AppBar(title: Text("Row demo")),         body: Container(             color: Colors.green,             child: Row(children: <Widget>[ Expanded(                   child: Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, )), Expanded(                   child: Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, )), Expanded(                   child: Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, )) ]))))); 

运行效果：

有人会问，这样跟将Row设置mainAxisAlignment:MainAxisAlignment.spaceEvenly有什么区别呢？MainAxisAlignment.spaceEvenly 并不会改变子组件的尺寸，大家可以参阅我的另一篇文章
flutter Row和Column组件 示例六

示例四：将一个组件设置成其它组件的两倍大小

import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(     home: Scaffold(         appBar: AppBar(title: Text("Row demo")),         body: Container(             color: Colors.red,             child: Row(children: <Widget>[ Expanded(                   child: Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, )), Expanded(                   flex: 2,                   child: Image.asset( "graphyics/face.jpg",                     width: 100,                     height: 100,                     fit: BoxFit.cover, )), Expanded(                   child: Image.asset( "graphyics/face.jpg",                 width: 100,                 height: 100,                 fit: BoxFit.cover, )) ]))))); 

运行效果：

由于其它组件弹性系数默认是1，中间组件设置了弹性系数2，因此宽度是其它组件的两倍。

Expanded组件的属性比较少，用途广泛，用法也很简单。关于它的介绍就到这里，不知道你有没有学会？