Question

两个元素之间存在间隙，如何消除它们？示例代码和效果截图如下：

代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.red, // Color(0xFF275FF0),

          child: Column(
            // mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 5),
              Container(
                height: 100,
                color: Colors.white,
              ),
              Container(
                height: 100,
                color: Colors.white,
              ),
              Container(
                height: 100,
                color: Colors.white,
              ),
])))
}

Answer 1

我之前没有注意到这些像素。为避免这种情况，您应该使用 ListView 而不是 Column。

这是一个与您的代码相似的示例代码。

    return Scaffold(
      body: SafeArea(
        child: ColoredBox(
          color: Colors.red,
          child: ListView(
            shrinkWrap: true,
            children: [
              const SizedBox(
                height: 5,
              ),
              Container(
                height: 100,
                color: Colors.white,
              ),
              Container(
                height: 200,
                color: Colors.white,
              ),
              Container(
                height: 300,
                color: Colors.white,
              )
            ],
          ),
        ),
      ),
    );

我也使用 ColoredBox，因为它比 Container 更优化和更具体

如何在颤动中删除列或行中的小部件之间的空间？

1 个答案: