颤振中列的多个子项之间存在不需要的空间

Question

我在删除列内的扩展小部件之间的空间时遇到问题，这是我最多 4 个扩展小部件的代码，还有 3 个，我已经尝试了很多东西，但仍然不起作用。

class XylophoneApp extends StatelessWidget {
  const XylophoneApp({super.key});
  void playsound(int num) {
    final player = AudioPlayer();
    player.play(AssetSource('note$num.wav'));
  }

    return MaterialApp(
        home: Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: TextButton(
                onPressed: () {
                  playsound(1);
                },
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
            Expanded(
              child: TextButton(
                onPressed: () {
                  playsound(2);
                },
                child: Container(
                  color: Colors.orange,
                ),
              ),
            ),
            Expanded(
              child: TextButton(
                onPressed: () {
                  playsound(3);
                },
                child: Container(
                  color: Colors.yellow,
                ),
              ),
           
          ],
        ),
      ),
    ));
  }
}

我正在

我想要

Answer 1

输出中出现的空格是

TextButton

小部件的填充/边距。

我不确定你为什么使用

TextButton

，但是要制作

Container

可点击，你可以使用

GestureDetector

或

InkWell

，如下所示：

Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: GestureDetector(
                onTap: () {
                   playsound(1);
                },
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {
                   playsound(2);
                },
                child: Container(
                  color: Colors.orange,
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {
                   playsound(3);
                },
                child: Container(
                  height: 50,
                  color: Colors.yellow,
                ),
              ),
            )
          ],
        ),
      ),
    );

输出：