如何在展开ExpansionTile时实现自动滚动

Question

我正在制作我的第一个Flutter应用程序，到目前为止很喜欢它。有一件让我无法确定的烦人事情是，我有一些ExpandedTiles，如下所示： 然而，当这个Tile被展开时，屏幕保持在同一位置；如下所示：

我希望当ExpandedView被展开时，应用程序可以向下滚动一点。

我找到了这个之前的问题，如何在展开ExpansionTile / Listview时滚动？ 但是它有点不同，因为它只是每次创建相同项目的列表。我想要相同的功能，但是针对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') ,
          ),

希望有人能够指点我如何正确实现滚动控制器。

- John

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时，表示正在折叠。您可以使用这些值并检查滚动偏移量，以确定是否需要动画滚动向下移动。

- EdwynZN

---

谢谢，这很不错。唯一的问题是当它扩展时，它会滚动到所需的位置，但然后又“飞盘”回到初始位置。我应该尝试调整那个120吗？我已经尝试过放大和缩小，但是效果相同。 - John

也许可以添加一个延迟的未来，等待扩展瓷砖完成动画后再滚动。 - EdwynZN

Answer 2

如果你正在使用ListView或其他可滚动的组件，可以尝试以下方法，非常实用。 https://medium.com/flutter-community/flutter-how-to-scroll-an-expansiontile-when-it-is-expanded-ad706cfb80a6

- aqibGenk