如何为所有页面制作一个 CustomScrollView

Posted 2023-03-07

【中文标题】如何为所有页面制作一个 CustomScrollView

【英文标题】：how to make one CustomScrollView for all pages

【发布时间】：2020-02-25 10:57:04

【问题描述】：

我有一个主页，根据型号，它显示在 CustomScrollView slivers 其他页面中。

例子：

CustomScrollView(
  physics: _bouncingScrollPhysics,
  controller: _scrollController,
  slivers: <Widget>[
    _pages[_selectedTab]
  ],
),

我不想在每个页面上使用控制器和物理复制CustomScrollView，所以这个解决方案对我来说似乎很实用。但是我遇到了这样一个问题，如果页面类返回，比如一个SliverList，那么一切正常，但是如果类需要返回多个呢？

 @override
 Widget build(BuildContext context) 
   return SliverList() //OK
 

 @override
 Widget build(BuildContext context) 
   return ...[
     SliverList(),
     SliverList()
   ]; // NOT OK

【问题讨论】：

SliverList 下是什么意思？ CustomScrollView 的 slivers 属性的小部件列表？为什么不将几个SliverLists 合并为单个SliverList？ build 可以返回 only 单个小部件。

return ` ...[SliverList(), SliverList() ]` 将展开不是小部件对象的列表。所以返回类型与返回的对象不匹配。

我知道你不能返回list <Widget>，所以我问这个问题，有什么选择吗？至于合并 ok，但是如果你需要返回SliverAppBar，SliverList (delegate: SliverChildBuilderDelegate)，SliverList (delegate: SliverChildListDelegate)。那该怎么办？我想为所有页面创建一个CustomScrollView，但不要为每个页面复制它

【参考方案1】：

创建用于存储条子信息的类

class SliverListInfo 
  final SliverAppBar sliverList;
  final SliverList sliverAppBar;
  SliverListInfo(this.sliverAppBar, this.sliverList);

在StatefullWidget 的State 类内部，您想在其中使用CustomScrollView

class _SliverTestState extends State<SliverTest> 
  /// Selected tab pane
  int _selectedTab;

  /// List of sliver information
  final sliverLists = <SliverListInfo>[];

  @override
  void initState() 
    super.initState();
    // Populate items
    sliverLists.add(SliverListInfo(SliverAppBar(...),
      SliverList(delegate: SliverChildBuilderDelegate),
    )); // page 1
    sliverLists.add(SliverListInfo(SliverAppBar(...),
      SliverList(delegate: SliverChildListDelegate),
    )); // page 2
    ...
  

  @override
  void build(BuildContext context) 
    return CustomScrollView(
      physics: _bouncingScrollPhysics,
      controller: _scrollController,
      slivers: sliverLists[_selectedTab],
    );
  

附：小部件可以像任何其他对象一样创建。 build 函数仅在小部件嵌入到小部件树中以对其进行可视化时使用。

【讨论】：

嗨，感谢您的回答和所花费的时间，这是一个可行的选项，只是现在还有另一个问题，您必须将所有页面放在一个页面上.. 理想情况下，我们需要继承 @ 987654327@，我们可能需要针对特定​​页面和其他逻辑使用相同的控制器，并且在一个页面上雕刻所有内容是个坏主意。但多亏了你，我以正确的方式解决了这个问题。最后，我只做了一个接受list <Widget> 参数的共享页面。现在所有页面都简单地返回 this 并传递参数，一种 mixins

我好像没明白你的意思。您问如何为所有页面使用一个CustomScrollView。所以想法是创建一个包含CustomScrollView 的host（主）页面，并初始化将显示在此host 页面中的条子信息集合。 IE。您为第一个选项卡初始化集合red app bar，为第二个选项卡初始化green app bar。因此，当 _selectedTab 将被更改时，CustomScrollView 将显示您收藏中的相应小部件。附：也许我没有足够的信息来说明你想要什么...... :) 希望这一切都有帮助。s