flutter 不同的scrollController具有相同的偏移值问题

Question

在一页下，我为两个 ListView.builder 小部件创建了两个滚动控制器。但是，我不知道为什么当我滚动第一个 ListView 并单击标题“滚动示例”更改到第二个 ListView 页面时，第二个 ListView 也更改了其滚动位置，并且 _scrollController2 与 _scrollController1 获得了相同的值。 有什么好办法让两个控制器独立吗

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;

  @override
  void initState() {
    // TODO: implement 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(
                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(
                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"),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

小部件结构完全相同，您可以使用帮助小部件树区分小部件的键。

   flag
     ? Expanded(
       key: const ValueKey("list 1"),
       ....)
     : Expanded(
       key: const ValueKey("list 2"),

更多关于钥匙