Flutter中两个ScrollController偏移值相同问题及独立方案咨询

问题出在Flutter的组件状态复用机制上：当你切换flag显示不同ListView时，两个ListView属于同类型组件，且没有唯一标识，Flutter会复用之前组件的滚动状态，导致第二个ListView的位置和第一个同步——哪怕你用了不同的ScrollController。

解决方法很简单，给两个ListView分别设置唯一的GlobalKey，让Flutter能区分它们的状态，这样两个ScrollController就能完全独立工作：

修改后的代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(OnlineImageExample());
}

class OnlineImageExample extends StatefulWidget {
  @override
  _OnlineImageExampleState createState() => _OnlineImageExampleState();
}

class _OnlineImageExampleState extends State<OnlineImageExample> {
  ScrollController _scrollController1 = ScrollController();
  ScrollController _scrollController2 = ScrollController();
  bool flag = true;
  // 给两个ListView创建唯一的key
  final _listKey1 = GlobalKey();
  final _listKey2 = GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: InkWell(
            onTap: () {
              setState(() {
                flag = !flag;
              });
            },
            child: Text('scroll example'),
          ),
        ),
        body: Column(
          children: [
            flag
                ? Expanded(
                    child: ListView.builder(
                      key: _listKey1, // 绑定key
                      physics: AlwaysScrollableScrollPhysics(),
                      controller: _scrollController1,
                      itemCount: 30,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: EdgeInsets.all(10),
                          child: Container(
                            height: 60,
                            width: 20,
                            color: Colors.red,
                            child: Text("$index"),
                          ),
                        );
                      },
                    ),
                  )
                : Expanded(
                    child: ListView.builder(
                      key: _listKey2, // 绑定key
                      physics: AlwaysScrollableScrollPhysics(),
                      controller: _scrollController2,
                      itemCount: 30,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: EdgeInsets.all(10),
                          child: Container(
                            height: 60,
                            width: 20,
                            color: Colors.blue,
                            child: Text("$index"),
                          ),
                        );
                      },
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}

你也可以在切换flag时手动重置另一个控制器的滚动位置，但用GlobalKey的方法更优雅，完全符合Flutter的组件状态管理逻辑。

内容的提问来源于stack exchange，提问作者pipi