Question

某些 Flex 值会在 Expanded 小部件之间创建空白，据我所知，这是计算的其余部分。

例如：

Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
        flex: 4,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 6,
        child: Container(
          color: Colors.green,
        ),
      ),
    ],
  ),
);

我正在寻找一种优雅的方式来让这些小部件占据所有可用空间。整个问题是 flex 值在动画过程中发生变化，并且这条白线闪烁。

谢谢！

Answer 1

它似乎来自 border 的 Container，

Github Issue 仍然打开。

这是小部件

 Scaffold(
      backgroundColor: Colors.green,
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 4,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(
                  color: Colors.green,
                ),
              ),
              child: Text("Section A"),
            ),
          ),
          Expanded(
            flex: 6,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(
                  color: Colors.green,
                ),
              ),
              child: Text("Section B"),
            ),
          ),
        ],
      ),
    );

Answer 2

尝试在展开的 Widget 之间添加 SizedBox()，如下所示：

Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
        flex: 4,
        child: Container(
          color: Colors.green,
        ),
      ),
   SizedBox(
     height: 25,)
      Expanded(
        flex: 6,
        child: Container(
          color: Colors.green,
        ),
      ),
    ],
  ),
);

扩展小部件之间的空白

2 个答案: