如何使按钮更靠近 Flutter

Posted 2023-02-23

【中文标题】如何使按钮更靠近 Flutter

【英文标题】：How do I bring the button closer to the Flutter

【发布时间】：2021-07-29 07:49:44

【问题描述】：

如图所示，第一个按钮、数字和第二个按钮之间有很大的差距。我尝试使用和不使用容器，我在 body:Center 和 Listview 之间切换。我非常希望箭头直接位于数字的上方和下方。

body: ListView(
          children: <Widget>[
            Container(
              width: 350,
              height: 36,
              child: Row(children: <Widget>[
                Text(
                  "ATH: " + highScore.toString(),
                  textAlign: TextAlign.right,
                  style: TextStyle(
                      fontSize: 30, color: Color.fromRGBO(0, 136, 255, 70)),
                ),
                Spacer(),
                Text(
                  Score.toString(),
                  textAlign: TextAlign.right,
                  style: TextStyle(
                      fontSize: 30, color: Color.fromRGBO(0, 136, 255, 70)),
                )
              ]),
            ),
            IconButton(
                onPressed: PfeilHoch,
                alignment: Alignment.bottomCenter,
                icon: Icon(Icons.arrow_drop_up),
                iconSize: 350,
                color: Color.fromRGBO(0, 300, 0, 100),
                padding: EdgeInsets.all(0),
              ),
            
            Text(
                (randomNumber.toString()),
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 90, ),
              ),
            
            IconButton(
                alignment: Alignment.topCenter,
                onPressed: PfeilRunter,
                icon: Icon(Icons.arrow_drop_down),
                iconSize: 350,
                color: Color.fromRGBO(300, 0, 0, 100),
                padding: EdgeInsets.all(0),
              ), 
          ],
        )

现在的样子

【参考方案1】：

使用带有 SingleScrollChild 的 Column 代替 Listview

【讨论】：

谢谢！所以你的意思是body: SingleChildScrollView( child: Column(children: [Container(？万一我没有做错什么，这并没有真正缩小差距

【参考方案2】：

这是因为 IconButton 是一个 Material Design 小部件，它遵循可点击对象每边至少需要 48px 的规范。您可以从任何 IDE 中单击图标按钮实现

使用GestureDetector 而不是IconButton

Container(
  padding: const EdgeInsets.all(0.0),
  height: 200,
  width: 200,
  child: GestureDetector(onTap: () , child: Icon(Icons.arrow_drop_up, size: 200) )
  ,
)

【讨论】：

谢谢，我实现了。我给容器上色了，所以我可以更好地解释我想要做什么。 prnt.sc/12mbjyx 无论如何，我可以将底部箭头指向红色容器中更高的位置吗？这样底部箭头和文本之间的距离就像顶部箭头和文本之间的距离一样。

我也为此应用了许多解决方案，但没有其他方法