不知道小部件尺寸的解决方案

Question

我有一个使用MaterialApp，DefaultTabController，Scaffold和TabBarView构建的屏幕。

在此屏幕上，我具有使用StreamBuilder从sqllite中检索元素列表的正文内容。我得到了确切的100个元素（“有限列表”），可以使用ListView显示。

我的问题，使用ListView.builder，当打开此屏幕时我们如何跳转到某个索引？

我的主屏幕：

...
ScrollController controller = ScrollController();

 @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner : false,
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(
              backgroundColor: Pigment.fromString(UIData.primaryColor),
              elevation: 0,
              centerTitle: true,
              title: Text(translations.text("quran").toUpperCase()),
              bottom: TabBar(
                tabs: [
                    Text("Tab1"),
                    Text("Tab2"),
                    Text("Tab3")
                ],
              ),
              leading: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Expanded(
                      child: InkWell(
                        child: SizedBox(child: Image.asset("assets/images/home.png"), height: 10, width: 1,),
                        onTap: () => Navigator.of(context).pop(),
                      )
                  ),
                ],
              ),
            ),

            floatingActionButton: FloatingActionButton(
              onPressed: _scrollToIndex,
              tooltip: 'Testing Index Jump',
              child: Text("GO"),
            ),

            body:
            TabBarView(
              children: [
                Stack(
                  children: <Widget>[
                    MyDraggableScrollBar.create(
                        scrollController: controller,
                        context: context,
                        heightScrollThumb: 25,
                        child: ListView(
                          controller: controller,
                          children: <Widget>[
                            Padding(
                                padding: EdgeInsets.fromLTRB(30, 15, 30, 8),
                                child: Container(
                                    alignment: Alignment.center,
                                    height: 30,
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(8),
                                      child: TextField(
                                        style: TextStyle(color: Colors.green),
                                        decoration: new InputDecoration(
                                            contentPadding: EdgeInsets.all(5),
                                            border: InputBorder.none,
                                            filled: true,
                                            hintStyle: new TextStyle(color: Colors.green, fontSize: 14),
                                            prefixIcon: Icon(FontAwesomeIcons.search,color: Colors.green,size: 17,),
                                            hintText: translations.text("search-quran"),
                                            fillColor: Colors.grey[300],
                                            prefixStyle: TextStyle(color: Colors.green)
                                        ),
                                        onChanged: (val) => quranBloc.searchSurah(val),
                                      ),
                                    )
                                )
                            ),

                            //surah list
                            streamBuilderQuranSurah(context)

                          ],
                        )
                    ) // MyDraggableScrollBar

                  ],
                ),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            )
        )));
  }

  Widget streamBuilderQuranSurah(BuildContext ctx){
    return StreamBuilder(
      stream: quranBloc.chapterStream ,
      builder: (BuildContext context, AsyncSnapshot<ChaptersModel> snapshot){
        if(snapshot.hasData){

          return ListView.builder(
            controller: controller,
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount:(snapshot.data.chapters?.length ?? 0),
            itemBuilder: (BuildContext context, int index) {
              var chapter =
              snapshot.data.chapters?.elementAt(index);
              return chapterDataCell(chapter);
            },
          );
        }
        else{

          return SurahItemShimmer();
        }
      },
    );
  }
...

类 MyDraggableScrollBar.dart ：

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

class MyDraggableScrollBar {
  static Widget create({
    @required BuildContext context,
    @required ScrollController scrollController,
    @required double heightScrollThumb,
    @required Widget child,
  }) {
    return DraggableScrollbar(

      alwaysVisibleScrollThumb: true,
      scrollbarTimeToFade: Duration(seconds: 3),
      controller: scrollController,
      heightScrollThumb: heightScrollThumb,
      backgroundColor: Colors.green,
      scrollThumbBuilder: (
        Color backgroundColor,
        Animation<double> thumbAnimation,
        Animation<double> labelAnimation,
        double height, {
        Text labelText,
        BoxConstraints labelConstraints,
      }) {
        return InkWell(
          onTap: () {},
          child: Container(
            height: height,
            width: 7,
            color: backgroundColor,
          ),
        );
      },
      child: child,
    );
  }
}

我尝试找到其他解决方案，但似乎不起作用，例如indexed_list_view仅支持无限列表

似乎抖动仍然没有此功能，请参见this issue

有什么想法吗？

Answer 1

我将介绍另一种方法，与@Shinbly 的方法不同，它支持列表延迟加载，并且还支持列表中的图块调整大小，而无需重新计算 ListView 的正确偏移量，也无需保存任何持久信息，例如“@ Stackoverflow 的侄子”确实如此。

这种方法的关键是利用 CustomScrollView，CustomScrollView.center 属性。

以下是基于 Flutter 文档 (widgets.CustomScrollView.2) 中的示例代码的示例：

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  List<int> top = [];
  List<int> bottom = [0];
  List<int> test = List.generate(10, (i) => -5 + i);
  bool positionSwitcher = true;

  @override
  Widget build(BuildContext context) {
    positionSwitcher = !positionSwitcher;
    final jumpIndex = positionSwitcher ? 1 : 9;
    Key centerKey = ValueKey('bottom-sliver-list');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Press Jump!! to jump between'),
        leading: IconButton(
          icon: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              top.add(-top.length - 1);
              bottom.add(bottom.length);
            });
          },
        ),
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              RaisedButton(
                child: Text('Jump!!'),
                onPressed: () => setState(() {}),
              ),
              Text(positionSwitcher ? 'At top' : 'At bottom'),
            ],
          ),
          Expanded(
            child: CustomScrollView(
              center: centerKey,
              slivers: <Widget>[
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int i) {
                      final index = jumpIndex - 1 - i;
                      return Container(
                        alignment: Alignment.center,
                        color: Colors.blue[200 + test[index] % 4 * 100],
                        height: 100 + test[index] % 4 * 20.0,
                        child: Text('Item: ${test[index]}'),
                      );
                    },
                    childCount: jumpIndex,
                  ),
                ),
                SliverList(
                  key: centerKey,
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int i) {
                      final index = i + jumpIndex;
                      return Container(
                        alignment: Alignment.center,
                        color: i == 0
                            ? Colors.red
                            : Colors.blue[200 + test[index] % 4 * 100],
                        height: 100 + test[index] % 4 * 20.0,
                        child: Text('Item: ${test[index]}'),
                      );
                    },
                    childCount: test.length - jumpIndex,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

说明：

我们使用单个列表作为 SliverList
在每次重建期间，我们使用 center 键重新定位 SliverList 内的第二个 ViewPort
仔细管理从SliverList索引到数据源列表索引的转换
注意滚动视图如何通过传递从该 SliverList 的底部开始的索引来构建第一个 SliverList（即索引 0 表示第一个列表条中的最后一项）
给CustomeScrollView一个合适的key来决定是否“重新定位”

Answer 2

常规解决方案：

要存储任何可以表示为数字/字符串/字符串列表的内容，Flutter提供了一个功能强大且易于使用的插件，该插件可以存储需要与键一起存储的值。因此，下次需要时，您将需要检索甚至更新该值，而您所需要的就是该密钥。

要开始使用，请将shared_preferences插件添加到pubspec.yaml文件中，

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: "<newest version>"

从终端运行flutter pub get，或者如果您使用IntelliJ，只需单击Packages get（在查看pubspec.yaml文件的同时，您会在屏幕右上角找到它。）

成功执行以上命令后，请将以下文件导入您的main.dart或相关文件中。

  import 'package:shared_preferences/shared_preferences.dart';

现在，只需将ScrollController附加到您的ListView.builder()小部件上，并确保只要用户以任何方式离开并设置了设置，就可以使用shared_preferences将最终/最后的偏移量与特定键一起存储当相关小部件的initState被调用时。

为了知道检测应用程序状态的变化并按照其操作，我们将继承WidgetsBindingObserver到我们的类。

要遵循的步骤：

使用 StatefulWidget的State类扩展WidgetsBindingObserver类。
将异步函数resumeController()定义为上述类的函数成员。

  Future<void> resumeController() async{
    _sharedPreferences = await SharedPreferences.getInstance().then((_sharedPreferences){
      if(_sharedPreferences.getKeys().contains("scroll-offset-0")) _scrollController= ScrollController(initialScrollOffset:_sharedPreferences.getDouble("scroll-offset-0"));
      else _sharedPreferences.setDouble("scroll-offset-0", 0);
      setState((){});
      return _sharedPreferences;
    });

声明两个变量，一个用于存储和传递滚动控制器，另一个用于存储和使用SharedPreferences实例。

  ScrollController _scrollController;
  SharedPreferences _sharedPreferences;

调用resumeController()并将您的类传递给WidgetsBinding类中实例对象的addObserver方法。

  resumeController();
  WidgetsBinding.instance.addObserver(this);

只需将此代码粘贴到类定义中（其他成员函数之外）

 @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if(state==AppLifecycleState.paused || state==AppLifecycleState.inactive || state==AppLifecycleState.suspending)
       _sharedPreferences.setDouble("scroll-offset-0", _scrollController.offset);
    super.didChangeAppLifecycleState(state);
  }

将ScrollController()传递到相关的Scrollable。

工作示例：

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with WidgetsBindingObserver{

  //[...]
  ScrollController _scrollController;
  SharedPreferences _sharedPreferences;

  Future<void> resumeController() async{
    _sharedPreferences = await SharedPreferences.getInstance().then((_sharedPreferences){
      if(_sharedPreferences.getKeys().contains("scroll-offset-0")) _scrollController= ScrollController(initialScrollOffset:_sharedPreferences.getDouble("scroll-offset-0"));
      else _sharedPreferences.setDouble("scroll-offset-0", 0);
      setState((){});
      return _sharedPreferences;
    });

  }

  @override
  void initState() {
    resumeController();
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if(state==AppLifecycleState.paused || state==AppLifecycleState.inactive || state==AppLifecycleState.suspending)
       _sharedPreferences.setDouble("scroll-offset-0", _scrollController.offset);
    super.didChangeAppLifecycleState(state);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Smart Scroll View"),
        ),
        body: ListView.builder(
            itemCount: 50,
            controller: _scrollController,
            itemBuilder: (c,i)=>
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 24,vertical: 16),
                  child: Text((i+1).toString()),
                ),
        ),
      ),
    );
  }
}

Answer 3

不知道小部件尺寸的解决方案

我在不知道窗口小部件大小的情况下找到的解决方案是显示从索引到末尾的反向“子列表”，然后滚动到“子列表”的顶部并重置整个列表。由于是反向列表，因此该项目将添加到列表顶部，并且您将停留在自己的位置（索引）。

问题是您不能使用listView.builder，因为您需要更改列表的大小

示例

class _ListViewIndexState extends State<ListViewIndex> {
  ScrollController _scrollController;
  List<Widget> _displayedList;
  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController();

    _displayedList = widget.items.sublist(0, widget.items.length - widget.index);

    if (SchedulerBinding.instance.schedulerPhase == SchedulerPhase.persistentCallbacks) {
      SchedulerBinding.instance.addPostFrameCallback((_) {
//here the sublist is already build
        completeList();
      });
    }
  }

  completeList() {
//to go to the last item(in first position) 
    _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
//reset the list to the full list
    setState(() {
      _displayedList = widget.items;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        ListView(
          controller: _scrollController,
          reverse: true,
          children: _displayedList,
        ),
      ]
    );
  }
}

Answer 4

https://pub.dev/packages/indexed_list_view软件包可能会帮助您。使用类似这样的内容：

IndexedListView.builder(
    controller: indexScrollController, 
    itemBuilder: itemBuilder
);


indexScrollController.jumpToIndex(10000);

Answer 5

您可以使用https://pub.dev/packages/scrollable_positioned_list。您可以将初始索引传递给小部件。

ScrollablePositionedList.builder(
 initialScrollIndex: 12, //you can pass the desired index here//
 itemCount: 500,
 itemBuilder: (context, index) => Text('Item $index'),
 itemScrollController: itemScrollController,
 itemPositionsListener: itemPositionsListener,
);

Flutter ListView.builder-如何以编程方式跳转到某些索引

5 个答案:

不知道小部件尺寸的解决方案

示例