Question

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

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

我希望有人能帮助我，希望这对以后的人有所帮助。

class Agent < ApplicationRecord

  def self.totals_in_last_three_months
    joins("
      RIGHT JOIN generate_series(
        date_trunc('month', statement_timestamp() - interval'2 months'),
        date_trunc('month', statement_timestamp()),
        interval'1 month'
      ) as months(month)
      ON date_trunc('month', agents.created_at) = months.month")
      .group('months.month')
      .count('agents.*')
  end

end

Answer 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;
            });
          }
        },
      ),
    ),
  );
}

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

1 个答案: