Flutter - 自动滚动到特定卡片

Question

我正在尝试启用自动滚动到它应该以垂直方式滚动的特定卡片，我使用 Scrollable.ensureVisible 实现了这一点。但它只有在 Scrollable.ensureVisible 与任何小部件的 ontap 或 onpressed 功能一起放置时才有效（使用按钮点击尝试）。但我的实际要求是，Autoscroll 应该在没有任何用户操作的情况下工作。我尝试了以下代码，但得到了错误键。CurrentContext 为空

        import 'package:flutter/material.dart';
        import 'dart:async';
        import 'package:http/http.dart' as http;
        import 'package:html/parser.dart';
        
        void main() {
          runApp(TestClass());
        }
        
        class TestClass extends StatefulWidget {
          @override
          _TestClassState createState() => _TestClassState();
        }
        
        class _TestClassState extends State<TestClass> {
          bool loading = true;
        
          final scrollCardOne = new GlobalKey();
          final scrollCardTwo = new GlobalKey();
        
          var ScrolltoCard1,
              ScrolltoCard2,
              response;
        
          Future fetchData() async {
            ScrolltoCard1= 'no';
            ScrolltoCard2= 'yes';
            final response = await http.get(URL);
            if (response.statusCode == 200) {
              print("Fetch successful");
              response = response.body;
            } else {
              print(response.statusCode);
            }
          }
        
          @override
          void initState() {
            super.initState();
            this.fetchData().then((value) {
              setState(() {});
            });
          }
        
          @override
          Widget build(BuildContext context) {
            if (ScrolltoCard1 == 'yes') {
              Scrollable.ensureVisible(disclaimer.currentContext);
            } else if (ScrolltoCard2 == 'yes') {
              Scrollable.ensureVisible(greivance.currentContext);
            return MaterialApp(
              home: Scaffold(
                body: Container(
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: 100.0,
                      ),
                      Text(
                        'Text Heading',
                        ),
                      ),
                      Expanded(
                        child: Card(
                          margin: EdgeInsets.all(10),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15.0),
                          ),
                          elevation: 2,
                          color: Colors.white,
                          child: SingleChildScrollView(
                            child: Container(
                              child: Column(
                                children: <Widget>[
                                  SizedBox(
                                    key: ScrolltoCard1,
                                    height: 30.0,
                                  ),
                                  aboutCardOne(),
                                  SizedBox(
                                    key: ScrolltoCard2,
                                    height: 30.0,
                                  ),
                                  aboutCard2(),
                                 ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          }
                   
          Widget aboutCardOne() {
            return Card(
              margin: EdgeInsets.all(10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Flexible(
                    child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(children: [
                          Text(
                            "Card1 Sample"
                          ),
                          Text(
                            'Sample Text 1')
                        ])),
                  ),
                ],
              ),
            );
          }

          Widget aboutCardTwo() {
            return Card(
              margin: EdgeInsets.all(10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Flexible(
                    child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(children: [
                          Text(
                            "Card2 Sample"
                          ),
                          Text(
                            'Sample Text 2')
                        ])),
                  ),
                ],
              ),
            );
          }
        }
        

Answer 1

如果您将 ListView 与此包 scroll_to_index 一起使用，只需创建 2 个列表项并滚动到您想要的那个？

列表视图项：

AutoScrollTag(
  key: ValueKey(index),
  controller: controller,
  index: index,
  child: child
)

controller.scrollToIndex(index, preferPosition: AutoScrollPosition.begin)