Flutter 如何滾動到 SliverList 中的特定項目位置？

Question

我有一個SliverList與SliverChildBuilderDelegate ，我的問題是，我不能設置ScrollController到SliverList因為我想控制我的列表中滾動，我找滾動到具體的項目列表中（這是非常大），在正常ListView這份工作很容易，我想知道為什么SliverList沒有像ListView這樣的controller屬性？

注意：我知道CustomScrollView具有controller屬性並且我已經測試過，但這將控制整個視口，而不僅僅是列表

 @override
  Widget build(BuildContext context) {
    MainState m = Provider.of<MainState>(context, listen: false);
    return DefaultTabController(
      length: m.itemCategoryList.length,
      child: Scaffold(
          // appBar: _createAppBar(),
          body: Builder(builder: (context) => _createBody(context))),
    );
  }

  AppBar _createAppBar() {
    MainState m = Provider.of<MainState>(context);

    return AppBar(
      title: Text(
        m.selectedPartner.fullname,
        style: Theme.of(context).textTheme.display3,
      ),
      leading: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    );
  }

  _createBody(BuildContext context) {
    MainState m = Provider.of<MainState>(context);
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          titleSpacing: 0.0,
          elevation: 20.0,
          title: Container(
            decoration: BoxDecoration(color: Colors.black.withOpacity(0.3)),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    Spacer(
                      flex: 2,
                    ),
                    IconButton(
                      icon: Icon(Icons.info),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
          centerTitle: false,
          automaticallyImplyLeading: false,
          pinned: true,
          bottom: PreferredSize(
            // Add this code
            preferredSize: Size.fromHeight(10.0), // Add this code
            child: Text(''), // Add this code
          ),
          expandedHeight: 250,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              collapseMode: CollapseMode.none,
              background: Stack(
                children: <Widget>[
                  Image.network(
                    m.selectedPartner.imagepath,
                    fit: BoxFit.cover,
                    height: 300.0,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.black.withOpacity(0.6),
                    colorBlendMode: BlendMode.darken,
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          m.selectedPartner.fullname,
                          style: Theme.of(context)
                              .textTheme
                              .headline
                              .copyWith(color: Colors.white),
                        ),
                        Text(
                          m.selectedPartner.categorytexts,
                          style: Theme.of(context)
                              .textTheme
                              .title
                              .copyWith(fontSize: 17.0, color: Colors.white),
                        ),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      height: 30.0,
                      decoration: BoxDecoration(color: Colors.white),
                      child: Row(
                        children: <Widget>[
                          Text(
                              "Delivery time :" +
                                  m.selectedPartner.deliverytime.toString() +
                                  " mins",
                              style: Theme.of(context).textTheme.subtitle)
                        ],
                      ),
                    ),
                  )
                ],
              )),
        ),
        SliverPersistentHeader(
          delegate: _SliverAppBarDelegate(
            TabBar(
              isScrollable: true,
              labelColor: Colors.black87,
              unselectedLabelColor: Colors.black,
              tabs: m.itemCategoryList
                  .map((ele) => Tab(
                        text: ele.itemcategoryname,
                      ))
                  .toList(),
            ),
          ),
          pinned: true,
        ),
//=========I want to scroll to a specific position in this list
        GroupedSliverList(
            elements: m.itemList,
            groupBy: (ItemModel item) => item.itemcategory_id,
            groupSeparatorBuilder: (i, item) => _createGroupItem(i, item),
            itemBuilder: (_, item) => _createItem(item)),
      ],
    );
  }


  _createGroupItem(int categId, ItemModel item) {
    MainState m = Provider.of<MainState>(context, listen: false);
    ItemCategoryModel categModel =
        m.itemCategoryList.firstWhere((ele) => ele.id == categId);
    return Container(
      child: Text(
        categModel.itemcategoryname,
        style: Theme.of(context).textTheme.headline,
      ),
    );
  }

 

  _createItem(ItemModel item) {
    return Card(
      elevation: 3.0,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Row(
          children: <Widget>[
            CircleAvatar(
              radius: 30.0,
              backgroundImage: NetworkImage(item.imagepath),
            ),
            SizedBox(
              width: 18.0,
            ),
            _createDetailColumn(item)
          ],
        ),
      ),
    );
  }

  _createDetailColumn(ItemModel item) {
    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Flexible(
              flex: 1,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Text(
                      item.itemname,
                      style: Theme.of(context).textTheme.title,
                    ),
                  ),
                ],
              )),
          SizedBox(
            height: 5.0,
          ),
          Flexible(
            flex: 1,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    item.description,
                    style: Theme.of(context).textTheme.subtitle,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 5.0,
          ),
          SizedBox(
            height: 8.0,
          ),
          Row(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.green, width: 1.0),
                    borderRadius: BorderRadius.circular(10.0)),
                child: Padding(
                  padding: const EdgeInsets.all(6.0),
                  child: Text(item.price.toString() + " L.E.",
                      style: Theme.of(context)
                          .textTheme
                          .subtitle
                          .copyWith(color: Colors.green, fontSize: 16.0)),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      color: Colors.yellow,
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

Answer 1

你可以使用這個：

1. 為您的特定項目位置創建一個全局鍵，例如final dataKey = new GlobalKey();
2. 將密鑰添加到此特定位置key: dataKey
3. 添加將使頁面滾動到您的按鈕Scrollable.ensureVisible(dataKey.currentContext)

這是滾動到最后一項的完整代碼：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll To Index Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SilverAppBarExample(),
    );
  }
}



class SilverAppBarExample extends StatelessWidget {
  final dataKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // width: MediaQuery.of(context).size.width,
        // height: MediaQuery.of(context).size.height,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              leading: IconButton(
                  icon: Icon(Icons.filter_1),
                  onPressed: () {
                    // Do something
                  }),
              expandedHeight: 220.0,
              floating: true,
              pinned: true,
              snap: true,
              elevation: 50,
              backgroundColor: Colors.pink,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text('Title',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    )),
                background: Image.network(
                  'https://media-exp1.licdn.com/dms/image/C4D03AQEs7z0qHy2IWA/profile-displayphoto-shrink_400_400/0/1587196263121?e=1611792000&v=beta&t=bGjaklbEtTDYOFk5UvGLOTO5N3pSvIJtq6javEp32lU',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            new SliverList(
              delegate: new SliverChildListDelegate([
                Column(
                  children: [
                    _buildList(50),
                    Card(
                      key: dataKey,
                      child: new Text("data\n\n\n\n\n\ndata"),
                    ),
                  ],
                ),
              ]),
            ),
          ],
        ),
      ),
      bottomNavigationBar: new RaisedButton(
        onPressed: () => Scrollable.ensureVisible(dataKey.currentContext),
        child: new Text("Scroll to data"),
      ),
    );
  }

  Widget _buildList(int count) {
    List<Widget> listItems = List();

    for (int i = 0; i < count; i++) {
      listItems.add(
        new Padding(
          padding: new EdgeInsets.all(20.0),
          child: new Text(
            'Item ${i.toString()}',
            style: new TextStyle(fontSize: 25.0),
          ),
        ),
      );
    }

    return Column(
      children: listItems,
    );
  }
}

滾動前的頁面：

滾動后的頁面：

Answer 2

您是否嘗試過使用無限列表視圖？ 我要自己試試這個。 看起來很有希望。

import 'package:flutter/material.dart';
import 'package:infinite_listview/infinite_listview.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatefulWidget {
  @override
  _ExampleScreenState createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  final InfiniteScrollController _infiniteController = InfiniteScrollController(
    initialScrollOffset: 0.0,
  );

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Example'),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.arrow_downward),
              onPressed: () {
                _infiniteController.animateTo(_infiniteController.offset + 2000.0,
                    duration: const Duration(milliseconds: 250), curve: Curves.easeIn);
              },
            ),
            IconButton(
              icon: const Icon(Icons.arrow_upward),
              onPressed: () {
                _infiniteController.animateTo(_infiniteController.offset - 2000.0,
                    duration: const Duration(milliseconds: 250), curve: Curves.easeIn);
              },
            ),
          ],
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(text: 'First'),
              Tab(text: 'Second'),
              Tab(text: 'Third'),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            _buildTab(0),
            _buildTab(1),
            _buildTab(2),
          ],
        ),
      ),
    );
  }

  Widget _buildTab(int tab) {
    return InfiniteListView.separated(
      key: PageStorageKey(tab),
      controller: _infiniteController,
      itemBuilder: (BuildContext context, int index) {
        return Material(
          child: InkWell(
            onTap: () {},
            child: ListTile(
              title: Text('Tab $tab Item #$index'),
              subtitle: Text('Subtitle $index'),
              trailing: const Icon(Icons.chevron_right),
            ),
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) => const Divider(height: 2.0),
      anchor: 0.5,
    );
  }
}

Answer 3

您可以使用此插件 scrollable_positioned_list 來執行滾動事件，但不能與 silverList 一起使用