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

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

所以你在第一个代码中，在你的身体里，我们有 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，因为行没有任何固定高度。

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

始终牢记 Expanded 将采用其父小部件的高度或宽度。

扩展的小部件如何在颤振中工作？

1 个答案: