如何避免SliverAppBar内元素覆盖BackButton？

当缩小应用窗口时，SliverAppBar的actions区域内的图标和文本会挤压左侧的BackButton，导致覆盖问题，以下是几种可行的解决办法：

方法一：用Row+MainAxisSize.min约束actions宽度 #

将actions内的所有元素包裹在Row中，并设置mainAxisSize: MainAxisSize.min，让actions仅占用必要的横向空间，避免挤压leading区域。同时给文本添加溢出处理，防止文本横向溢出：

CustomScrollView(
  primary: true,
  slivers: <Widget>[
    const SliverAppBar(
      backgroundColor: Colors.black,
      pinned: true,
      title: Text(
        'Home',
        style: TextStyle(color: Colors.white),
      ),
      leading: BackButton(
        color: Colors.white,
      ),
      actions: <Widget>[
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.person, color: Colors.white),
            Flexible(
              child: Text(
                'text1',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.white),
              ),
            ),
            SizedBox(width: 10),
            Icon(Icons.tsunami, color: Colors.white),
            Flexible(
              child: Text(
                'text2',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.white),
              ),
            ),
            SizedBox(width: 10),
          ],
        ),
      ],
    ),
  ],
)

方法二：使用OverflowBar自动折叠内容 #

OverflowBar会在空间不足时自动将多余的元素折叠到溢出菜单中，彻底避免内容挤压的问题：

CustomScrollView(
  primary: true,
  slivers: <Widget>[
    const SliverAppBar(
      backgroundColor: Colors.black,
      pinned: true,
      title: Text(
        'Home',
        style: TextStyle(color: Colors.white),
      ),
      leading: BackButton(
        color: Colors.white,
      ),
      actions: <Widget>[
        OverflowBar(
          spacing: 10,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.person, color: Colors.white),
                Flexible(
                  child: Text(
                    'text1',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.tsunami, color: Colors.white),
                Flexible(
                  child: Text(
                    'text2',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  ],
)

方法三：动态隐藏部分内容 #

通过LayoutBuilder监听actions区域的可用宽度，当宽度小于设定阈值时，隐藏文本只保留图标，减少横向占用空间：

CustomScrollView(
  primary: true,
  slivers: <Widget>[
    SliverAppBar(
      backgroundColor: Colors.black,
      pinned: true,
      title: const Text(
        'Home',
        style: TextStyle(color: Colors.white),
      ),
      leading: const BackButton(
        color: Colors.white,
      ),
      actions: <Widget>[
        LayoutBuilder(
          builder: (context, constraints) {
            // 当可用宽度小于150时隐藏文本
            final showText = constraints.maxWidth > 150;
            return Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Icon(Icons.person, color: Colors.white),
                if (showText)
                  Flexible(
                    child: Text(
                      'text1',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(color: Colors.white),
                    ),
                  ),
                const SizedBox(width: 10),
                const Icon(Icons.tsunami, color: Colors.white),
                if (showText)
                  Flexible(
                    child: Text(
                      'text2',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(color: Colors.white),
                    ),
                  ),
                const SizedBox(width: 10),
              ],
            );
          },
        ),
      ],
    ),
  ],
)

内容的提问来源于stack exchange，提问作者Arnold Kumaraku