展开的小部件在flutter中如何工作？

Question

我有一个简单的代码，可以产生这样的设计

这是我的代码

这是我的设计代码：

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: ReusableCard(colour: Color(0xff1d1e33),)
                ),
                Expanded(
                  child: ReusableCard(colour: Color(0xff1d1e33),)
                ),
              ],
            ),
          ),
          Expanded(
            child: ReusableCard(colour: Color(0xff1d1e33)),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: ReusableCard(colour: Color(0xff1d1e33),)
                ),
                Expanded(
                  child: ReusableCard(colour: Color(0xff1d1e33),)
                ),
              ],
            ),
          ),
          Container(
            width: double.infinity,
            height: 100,
            color: Colors.pink,
          )
        ],
      ),
    );
  }
}

现在，当我删除父展开的小部件时，我得到这样的设计：

这是此设计的代码：

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Row(
            children: [
              Expanded(
                child: ReusableCard(colour: Color(0xff1d1e33),)
              ),
              Expanded(
                child: ReusableCard(colour: Color(0xff1d1e33),)
              ),
            ],
          ),
          Expanded(
            child: ReusableCard(colour: Color(0xff1d1e33)),
          ),
          Row(
            children: [
              Expanded(
                child: ReusableCard(colour: Color(0xff1d1e33),)
              ),
              Expanded(
                child: ReusableCard(colour: Color(0xff1d1e33),)
              ),
            ],
          ),
          Container(
            width: double.infinity,
            height: 100,
            color: Colors.pink,
          )
        ],
      ),
    );
  }
}

这是什么原因呢？即使我为父级删除了我为子级添加了扩展，那么它不应该是相同的吗？

可重复使用卡：

class ReusableCard extends StatelessWidget{
  final Color colour;
  ReusableCard({@required this.colour});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15),
      decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(20)
      ),
    );
  }
}

Answer 1

基本上，扩展的小部件将扩展到 parent 小部件的所有剩余高度，

因此，在第一个代码中，在您的正文中，我们有 4 个小部件

      Expanded(
        child: Row(
        ),
      ),
      Expanded(
        child: ReusableCard(colour: Color(0xff1d1e33)),
      ),
      Expanded(
        child: Row(
        ),
      ),
      Container(
        width: double.infinity,
        height: 100,
        color: Colors.pink,
      )

假设父窗口部件的高度是 1000， 最后容器的高度是固定的，所以总是需要 100，所以还剩下 900

列中的三个展开的小部件将占用剩余的 900，并且由于您没有在展开的小部件中指定任何 flex 属性，因此所有它们都将获得相同的高度，因此每个小部件 900/3 = 300。

在您拥有的列内的第二个代码中

      Row(
      ),
      Expanded(
        child: ReusableCard(colour: Color(0xff1d1e33)),
      ),
      Row(
      ),
      Container(
        width: double.infinity,
        height: 100,
        color: Colors.pink,
      )

再次假设可用高度为 1000，容器的固定高度为 100，因此剩下 900，现在展开的小部件将占用所有可用高度，即 900，因为行没有任何固定高度。

行内的 Expanded 小部件将使其中的卡片扩展到父级高度，但父行没有任何高度（0 高度），因此它将扩展到 0 高度，这是无用的。

始终记住，Expanded 将从其父窗口小部件获取高度或宽度。

Answer 2

Flutter 中的 Expanded widget 用于使子 widget 展开以填充 Row、Column 或 Flex 容器主轴中的可用空间。

它通常用于在行或列小部件的子项之间分配可用空间。如果扩展多个子项，则可用空间根据弹性因子在它们之间分配。 Expanded 小部件必须是 Row、Column 或 Flex 的后代。

有关扩展小部件代码的详细示例，请参阅以下链接： https://www.codecappuccino.com/post/flutter-expanded