行中的颤振图标“右溢出 X 像素”答案

【问题标题】：Flutter Icons in Row "right overflowed by X pixels"行中的颤振图标“右溢出 X 像素”
【发布时间】：2020-12-06 21:18:28
【问题描述】：

我正在尝试在 Flutter 中构建一个标签栏，使其关闭和打开。在打开时，由于 Row 中的图标只有在 Row 扩展后才完全可见，所以它给了我著名的 Flutter“溢出”错误。

我尝试阅读可能的解决方案，但大多数都与文本溢出问题有关。我尝试将我的 Row 包装在“扩展”中，但我意识到这无论如何都没有多大意义。我查看了其他解决方案，但找不到与我在行小部件中的图标问题类似的任何内容。

我希望有人可以帮助我，并希望这对将来的人有所帮助。

  bool selected = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: AnimatedContainer(
          padding: selected ? EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0) :
          EdgeInsets.symmetric(vertical: 12.0, horizontal: 30.0),
          width: selected ? 48 : MediaQuery.of(context).size.width * 0.85,
          child: selected ? Row(
            children: [
              Icon(Icons.favorite),
            ],
          )
              : Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.home),
              Icon(Icons.message),
              Icon(Icons.add),
              Icon(Icons.shopping_cart),
              Icon(Icons.person_outline),
            ],
          ),
          decoration: BoxDecoration(
              color: Colors.grey, borderRadius: BorderRadius.circular(30)),
          duration: Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
        ),
      ),
    );
  }
}```

[Fig.1][1]

Fig. 1

[Fig.2][2]

Fig. 2


  [1]: https://i.stack.imgur.com/hkjPM.jpg
  [2]: https://i.stack.imgur.com/nnDTi.jpg

【问题讨论】：

当您尝试添加一个没有足够空间的小部件时会导致溢出。考虑传递较低的填充值和宽度。您设置了如此多的填充，这可能是原因，因为它从有限的空间中占用了如此多的空间

标签： flutter flutter-layout flutter-animation

【解决方案1】：

有很多选择来处理它，这取决于您的需要。我添加了两个

首先。将每个图标包裹在Flexible Widget Flutter Widget of the Week about it

bool isSelected = false;
@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      setState(() {
        isSelected = !isSelected;
      });
    },
    child: Center(
      child: AnimatedContainer(
        padding: isSelected
            ? EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0)
            : EdgeInsets.symmetric(vertical: 12.0, horizontal: 30.0),
        width: isSelected ? 48 : MediaQuery.of(context).size.width * 0.85,
        child: isSelected
            ? Icon(Icons.favorite)
            : Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _icon(Icons.home),
                  _icon(Icons.message),
                  _icon(Icons.add),
                  _icon(Icons.shopping_cart),
                  _icon(Icons.person_outline),
                ],
              ),
        decoration: BoxDecoration(
            color: Colors.grey, borderRadius: BorderRadius.circular(30)),
        duration: Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
      ),
    ),
  );
}

Widget _icon(IconData data) {
  return Flexible(child: Icon(data));
}

其次是使用 onEnd 回调。 documentation。

bool isSelected = false; bool hasFullWidth = true;

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      setState(() {
        isSelected = !isSelected;
        hasFullWidth = false;
      });
    },
    child: Center(
      child: AnimatedContainer(
        padding: isSelected
            ? EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0)
            : EdgeInsets.symmetric(vertical: 12.0, horizontal: 30.0),
        width: isSelected ? 48 : MediaQuery.of(context).size.width * 0.85,
        child: !isSelected && hasFullWidth
            ? Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(Icons.home),
                  Icon(Icons.message),
                  Icon(Icons.add),
                  Icon(Icons.shopping_cart),
                  Icon(Icons.person_outline),
                ],
              )
            : Icon(Icons.favorite),
        decoration: BoxDecoration(
            color: Colors.grey, borderRadius: BorderRadius.circular(30)),
        duration: Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
        onEnd: () {
          if (!isSelected) {
            setState(() {
              hasFullWidth = true;
            });
          }
        },
      ),
    ),
  );
}

【讨论】：