【flutter】Expanded组件

淩亂°似流年 2021-09-24 05:52 433阅读 0赞

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,
                  )
                ])))));

运行效果：  
![在这里插入图片描述][20200502165044239.png]  
如果不明白为什么会这样，请参阅我的另一篇文章 [flutter Row和Column组件][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,
                  )
                ])))));

运行效果：  
![在这里插入图片描述][20200502165153212.png]  
可以看到，将第一个组件使用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,
                  ))
                ])))));

运行效果：  
![在这里插入图片描述][20200502165849589.png]  
有人会问，这样跟将Row设置`mainAxisAlignment:MainAxisAlignment.spaceEvenly`有什么区别呢？MainAxisAlignment.spaceEvenly 并不会改变子组件的尺寸，大家可以参阅我的另一篇文章  
[flutter Row和Column组件 示例六][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,
                  ))
                ])))));

运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]  
由于其它组件弹性系数默认是1，中间组件设置了弹性系数2，因此宽度是其它组件的两倍。

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

[20200502165044239.png]: /images/20210923/adadc3d88b8b4538b9c719b5bbecd3ae.png
[flutter Row_Column]: https://blog.csdn.net/devnn/article/details/105887458
[20200502165153212.png]: /images/20210923/83495d9877dc4c11a380aa62d0528bda.png
[20200502165849589.png]: /images/20210923/e517919c456246f8a8ba57ad1631aebe.png
[flutter Row_Column_]: https://blog.csdn.net/devnn/article/details/105887458#example6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]: /images/20210923/8cdb2eea249b467ea94f7e3bb19dca60.png