展开ExpansionTile时如何自动向下滚动

Question

我正在制作我的第一个 Flutter 应用程序；到目前为止享受它。一件我无法完全理解的烦人的事情是，我有一些 ExpandedTiles，如下所示：

但是，当 tile 展开时，屏幕保持在同一位置；像这样：

我想要的是，当 ExpandedView 展开时应用是否向下滚动一点。

我发现了这个先前的问题，How to scroll an ExpansionTile / Listview when a tile is expanded?，但这有点不同，因为它每次都会创建一个相同项目的列表。我想要相同的功能，但需要 3 或 4 个唯一列表。

 Widget build(BuildContext context) {
final title = 'Lunch Menu';

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body:
    ListView(
      children:
    <Widget>[
        ListTile(
          subtitle: Image.asset('assets/images/lunch-logo.jpg'),
          title:  ElevatedButton(
            child: Text('Back'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => HomeRoute()),
              );
            },
          ),
        ),
        ListTile(
          //leading: Image.asset('assets/images/lunch-logo.jpg'),
          subtitle: Text('Enjoy our Lunch Options!',
            style: TextStyle(
              fontSize: 18.0,
              color: Colors.blue,
              fontWeight: FontWeight.w600,
            ) ,
            textAlign: TextAlign.center ,
        ),
        ),

        ExpansionTile(
          leading: Text(
            'Starters',
            style: TextStyle(
            fontSize: 18.0,
            color: Colors.blue,
            fontWeight: FontWeight.w600,
          ),
        ),
          children:<Widget>[ ListTile(
            leading: Image.asset('assets/images/food/image1.png'),
            title: Text('Title1'),
            isThreeLine: true,
            subtitle: Text('Description 1') ,
          ),ListTile(
            leading: Image.asset('assets/images/food/image2.png'),
            title: Text('Title2'),
            isThreeLine: true,
            subtitle: Text('Description2') ,
          ),

如果有人能指点我如何正确实现滚动控制器，我将不胜感激。

Answer 1

您可以创建自己的 ScrollController 并将其传递给 ListView，然后当 ExpansionTile 展开时，使用 onExpansionChanged 为控制器设置动画并向下滚动一点

class ListViewExample extends StatefulWidget {
  ListViewExample({Key key}) : super(key: key);

  @override
  _ListViewExampleState createState() => _ListViewExampleState();
}

class _ListViewExampleState extends State<ListViewExample> {
  final ScrollController scroll = ScrollController();

  @override
  void dispose() {
    scroll.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      controller: scroll,
      children: [
        ListTile(
          subtitle: Image.asset('assets/images/lunch-logo.jpg'),
          title:  ElevatedButton(
            child: Text('Back'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => HomeRoute()),
              );
            },
          ),
        ),
        ListTile(
          //leading: Image.asset('assets/images/lunch-logo.jpg'),
          subtitle: Text('Enjoy our Lunch Options!',
            style: TextStyle(
              fontSize: 18.0,
              color: Colors.blue,
              fontWeight: FontWeight.w600,
            ) ,
            textAlign: TextAlign.center ,
          ),
        ),
        ExpansionTile(
          leading: Text(
              'Starters',
              style: TextStyle(
              fontSize: 18.0,
              color: Colors.blue,
              fontWeight: FontWeight.w600,
            ),
          ),
          onExpansionChanged: (value) {
            if (value)
              scroll.animateTo(120, //this is a hardcoded value, would need some tweaking
                duration: const Duration(milliseconds: 300),
                curve: Curves.linear);
          },
          children: [
            ... //Your widgets
          ],
        )
      ],
    );
  }
}

onExpansionChanged 在展开时返回 true，在折叠时返回 false，您可以使用这些值并检查滚动偏移量以了解是否需要为滚动设置动画以向下移动