Singlechildscrollview() 不能在 AppBar/SliverAppBar 的属性底部：PreferedSize 上工作吗？答案

【问题标题】：Doesn't Singlechildscrollview() work on AppBar/SliverAppBar's property bottom:PrefferedSize, in flutter?Singlechildscrollview() 不能在 AppBar/SliverAppBar 的属性底部：PreferedSize 上工作吗？
【发布时间】：2022-08-21 00:43:52
【问题描述】：

我在 Flutter 中使用 SliverAppBar 的底部属性使其类似于 Youtube 的 App Bar。正如我们所知，应用栏的第二行有一个水平滚动视图。我尝试在底部属性中实现 sinlechildscrollview，但应用栏的第二行无法滚动到水平侧。我用不同的方法尝试过，所以我想知道 SCSV 是否适用于底部属性？如果有人提供解决方案，那将非常有帮助。

代码

bottom: PreferredSize(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: [
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(2.0),
                          ),
                        ),
                        height: 40,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Row(
                            children: const [
                              Icon(Icons.explore_outlined),
                              SizedBox(
                                width: 5,
                              ),
                              Text(
                                \'Explore\',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(1.0),
                          ),
                        ),
                        height: 40.0,
                        width: 2.0,
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              \'All\',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              \'Flutter\',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              \'MongoDb\',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              \'JavaScript\',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              \'GTA SanAndreas\',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                      Container(
                        decoration: const BoxDecoration(
                          color: searchBorder,
                          borderRadius: BorderRadius.all(
                            Radius.circular(19.0),
                          ),
                        ),
                        height: 40,
                        child: const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: 2.0,
                              bottom: 2.0,
                              left: 5.0,
                              right: 5.0,
                            ),
                            child: Text(
                              \'Forza Horizon 5\',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 5,
                      ),
                    ],
                  ),
                ),
              ),
              preferredSize: const Size.fromHeight(56.0),
            ),

标签： flutter flutter-desktop flutter-appbar

【解决方案1】：

简短的回答：是的，它确实有效。

更重要的是，我将您的示例粘贴到 CustomScrollView 和 SliverAppBar 中，它可以立即完美运行！

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(
        title: Text('Sliver AppBar'),
        bottom: PreferredSize(
          ...
        ),
      ),
   ],
 );
}

这是在我运行 Android 10 的真实 Android 设备上

【讨论】：

那么可能是桌面版本和浏览器的问题。因为它也不适用于 chrome。

【解决方案2】：

使用此代码

appBar: AppBar(
      title: SingleChildScrollView(
        scrollDirection: Axis.horizontal,  // it's important
        child: Text(
          'your title',
          style: TextStyle(
            overflow: TextOverflow.clip,
          ),
        ),
      ),
    ),

【讨论】：