Question

我运行了Flutter Upgrade，它导致我的版式之一退步。

代码如下：

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FlatButton(
            child: Icon(
              Icons.remove,
              color: Colors.black,
            ),
            onPressed: () {
              setState(() {
                if (_debitValue > 1) _debitValue--;
              });
            },
          ),

          Slider(
            value: _debitValue.toDouble(),
            min: 1.0,
            max: 100.0,
            onChanged: (double value) {
              setState(() {
                _debitValue = value.toInt();
              });
            },
          ),

          FlatButton(
            child: Icon(
              Icons.add,
              color: Colors.black,
            ),
            onPressed: () {
              setState(() {
                if (_debitValue <100) _debitValue++;
              });
            },
          ),
        ],
      ),

这是一行带有'-'按钮，一个滑块和一个'+'按钮的行。

显示正常。昨天我完成了Flutter升级，现在它已超出屏幕宽度8像素。它说：

I/flutter (13431): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (13431): The following message was thrown during layout:
I/flutter (13431): A RenderFlex overflowed by 8.0 pixels on the right.
I/flutter (13431): 
I/flutter (13431): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter (13431): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (13431): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (13431): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (13431): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (13431): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (13431): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (13431): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (13431): like a ListView.

我添加了一些颜色来查看FlatButtons使用的边距。他们看起来很大。我试图更改它们，但没有成功。我尝试过：

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, ...)

我已经看到可以使用Inkwell代替FlatButton。它可以工作，但是对按钮的影响不同，我想了解如何使用FlatButton。

感谢您的建议

Answer 1

我还没有测试过，但是也许这样的东西可以工作？

Row(
  children: <Widget>[
    Expanded(
      child: FlatButton(
        ...,
      ),
      flex: 1,
    ),
    Expanded(
      child: Slider(
        ...,
      ),
      flex: 4, //maybe play with this value to see what looks best
    ),
    Expanded(
      child: FlatButton(
        ...,
      ),
      flex: 1,
    ),
  ],
),

Flutter升级后FlatButton保证金发生了变化

1 个答案: