在 appbar 操作中的图标按钮下方添加文本？

Question

我目前正在尝试在 AppBar 中的操作字段内的图标下方添加文本（“过滤器”）。

没有在它下面添加任何文本。该操作与文本和汉堡菜单图标完全对齐

示例：

我遇到了两个问题：

1. 当我添加文本时，过滤器图标会向上移动一点，我希望图标在同一个位置，但添加的文本可以理解。
2. 我遇到了溢出问题

我该如何解决这个问题？

谢谢！

    _appbarActions = [
      Column(
        children: [
          IconButton(icon: const Icon(Icons.filter_alt_outlined), onPressed: () {}),
          Text('Filter'),
        ],
      )
    ];

Answer 1

试试下面的 sn-p 代码：

1. 要删除IconButton 和Text 之间的空格，请仅使用Icon；
2. 对于溢出错误，您可以使用文本 fontSize（样式）管理图标大小；
3. 对于事件，使用 InkWell 小部件包装列

---

Container(
        margin: const EdgeInsets.only(right: 8.0),
        child: InkWell(
          onTap: () {},
          child: Stack(
            children: [
              Center(
                child: Icon(Icons.filter_alt_outlined),
              ),
              Positioned(
                child: Text(
                  'Filter',
                  style: TextStyle(fontSize: 10.0),
                ),
                bottom: 5,
              ),
            ],
          ),
        ),
      )

---