Flutter中Flexible和Expanded区别

Flutter中Flexible和Expanded区别

在官网的介绍中感觉说的很模糊：

• Flexible：Flexible是一个控制Row、Column、Flex等子组件如何布局的组件，Flexible 组件可以控制 Row、Column、Flex 的子控件占满父组件，比如，Row 中有3个子组件，两边的宽是100，中间的占满剩余的空间
• Expanded：Expanded 继承字 Flexible，fit 参数固定为 FlexFit.tight，也就是说 Expanded 必须（强制）填满剩余空间

首先看下他们的构造：

Flexible

 const Flexible({
    
    
    Key? key,
    this.flex = 1,
    this.fit = FlexFit.loose,
    required Widget child,
  }) : super(key: key, child: child);

Expanded

  const Expanded({
    
    
    Key? key,
    int flex = 1,
    required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);

构造中看出他们的 FlexFit 参数是不同的

FlexFit是个枚举类型

///
///  * [RenderFlex], the flex render object.
///  * [Column], [Row], and [Flex], the flex widgets.
///  * [Expanded], the widget equivalent of [tight].
///  * [Flexible], the widget equivalent of [loose].
enum FlexFit {
    
    
  /// The child is forced to fill the available space.
  ///
  /// The [Expanded] widget assigns this kind of [FlexFit] to its child.
  tight,

  /// The child can be at most as large as the available space (but is
  /// allowed to be smaller).
  ///
  /// The [Flexible] widget assigns this kind of [FlexFit] to its child.
  loose,
}
  

• tight: 必须强制填满剩余空间
• loose: 尽可能大的填满剩余空间，但是可以不填满

这就可以看出在填充方式上两者是不同的

1. Flexible与Expanded都是具有权重属性的组件 ,都可以控制Row、Column、Flex的子组件(children)如何布局的控件

2. Flexible可控制子组件布局是否充满剩余空间,依靠fit枚举参数控制(默认loose不填满),

   Expanded继承了Flexible 在构造函数内强制设置 fit参数为tight填满剩余空间

3. Flexible的loose参数表示子控件最多可以达到可用的大小，允许更小

4. 自由度Flexible更高，填满剩余空间直接使用Expanded更方便。

如下图所示Flexible可以不撑满剩余布局

示例如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
        appBar: AppBar(
          title: Text("布局测试"),
        ),
        body:Column(
          children: [
            buildFlexible(),
            SizedBox(height: 10,),
            buildExpanded()
          ],
        )
    );
  }

  Widget buildFlexible() {
    
    
    return
      Container(
        color: Colors.blueAccent,
        child: Row(
          children: [
            Container(
              color: Colors.yellow,
              height: 50,
              width: 100,
            ),
            Flexible(
                child: Container(
                  color: Colors.green,
                  height: 50,
                  child: Text("这是Flexible",style: TextStyle(color: Colors.white),),

            )),
            Container(
              color: Colors.red,
              height: 150,
              width: 100,
            )
          ],
        ),
      );
  }

  Widget buildExpanded() {
    
    
    return
      Container(
        color: Colors.blueAccent,
        child: Row(
          children: [
            Container(
              color: Colors.yellow,
              height: 50,
              width: 100,
            ),
            Expanded(
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.green,
                  height: 50,
                  child: Text("这是Expanded",style: TextStyle(color: Colors.white),),

                )),
            Container(
              color: Colors.red,
              height: 150,
              width: 100,
            )
          ],
        ),
      );
  }
}