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

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

我正在制作我的第一个 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,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'),subtitle: Text('Description2'),

如果有人能给我一个关于如何正确实现滚动控制器的指针，我将不胜感激。

解决方法

您可以创建自己的 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',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，您可以使用这些值并检查滚动偏移量以了解是否需要为滚动设置动画以向下移动