Question

 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',
          ),
        ],
      ),
     ),

Blockquote

两个IconButtons，第一个不起作用，但是第二个起作用，当您删除填充时，它可以正常工作，我应该怎么做？，而使用Container并不会带来太多帮助，因为它们也会占用空间，那么该怎么办？

Answer 1

那里有很多错误。

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

第二如果检查源代码，则会发现leading小部件的宽度限制。

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

其中_kLeadingWidth = 56

第一个解决方案

用Stack小部件替换Row小部件，如果这样做，则会因为两个IconButtons的大小超过宽度> 56而产生溢出异常。 >

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

删除IconButton并使用InkWell包装的Icon（以接收拍子）

      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))),
            ],
          ),
        ),
      );

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

1 个答案: