其他分享
首页 > 其他分享> > 【flutter】Expanded组件

【flutter】Expanded组件

作者:互联网

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组件的属性比较少,用途广泛,用法也很简单。关于它的介绍就到这里,不知道你有没有学会?

标签:Expanded,child,组件,100,flutter,BoxFit,Row
来源: https://blog.csdn.net/devnn/article/details/105892081