时间戳

首页 > 解决方案 > Flutter ， IconButton 在使用对齐或边距或填充时不起作用

android - Flutter ， IconButton 在使用对齐或边距或填充时不起作用

问题描述

 appBar: new AppBar(
      leading: Stack(
        children: <Widget>[
          IconButton(
            icon: const Icon(Icons.arrow_forward),
            onPressed: () {
              _nextPage(1);
            },
            tooltip: 'Next',
            padding: EdgeInsets.only(left: 360.0),
          ),
          IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () {
              _nextPage(-1);
            },
            tooltip: 'Previous',
          ),
        ],
      ),
     ),

块引用

两个图标按钮，第一个不起作用，但第二个起作用，当您删除填充时它工作正常，我应该怎么做？，并且使用容器也没有多大帮助，因为它们也占用空间，那该怎么办呢？

标签： androidflutterpadding

解决方案

你有很多错误。

首先， 您使用的是一个Stack，堆栈会将您的小部件放在另一个上，因此您必须使用Positioned或指定位置Align。

其次leading，如果您查看源代码，您会发现Widget 存在宽度限制。

if (leading != null) {
  leading = new ConstrainedBox(
    constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
    child: leading,
  );
}

其中 _kLeadingWidth = 56

第一种解决方案

用小部件替换你Stack的小Row部件，如果你这样做，你会得到一个溢出异常，因为你两个的大小IconButtons超过了宽度> 56。

最终解决方案（您可以找到更多）

取下您的IconButton并使用IconInkWell 包装的（以便接收水龙头）

      return Scaffold(
        appBar: new AppBar(
          leading: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              InkWell(
                  onTap: () => print("1"),
                  child: Padding(
                      padding: EdgeInsets.all(2.0),
                      child: const Icon(Icons.arrow_forward))),
              InkWell(
                  onTap: () => print("2"),
                  child: Padding(
                      padding: EdgeInsets.all(2.0),
                      child: const Icon(Icons.arrow_back))),
            ],
          ),
        ),
      );

推荐阅读