滾動串列取決于另一個串列滾動Flutter

我如何根據另一個串列滾動來滾動串列，例如：

class ConectLists extends StatefulWidget {
  const ConectLists({Key? key}) : super(key: key);

  @override
  State<ConectLists> createState() => _ConectListsState();
}

class _ConectListsState extends State<ConectLists> {
  ScrollController scrollConroller1 = ScrollController();
  ScrollController scrollConroller2 = ScrollController();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    scrollConroller1.dispose();
    scrollConroller2.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 8,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('List 1'),
              Text('List 2'),
            ],
          ),
          SizedBox(
            height: 8,
          ),
          Container(
            color: Colors.black.withOpacity(0.5),
            width: double.infinity,
            height: 4,
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: ListView.builder(
                    controller: scrollConroller1,
                    itemBuilder: (context, index) => Card(
                        elevation: 3,
                        child: SizedBox(
                            height: 40,
                            child:
                                Center(child: Text('First list item $index')))),
                    itemCount: 50,
                  ),
                ),
                Container(
                  color: Colors.black.withOpacity(0.5),
                  width: 4,
                  height: double.infinity,
                ),
                Expanded(
                  child: ListView.builder(
                    controller: scrollConroller2,
                    itemBuilder: (context, index) => Card(
                        elevation: 3,
                        child: SizedBox(
                            height: 40,
                            child: Center(
                                child: Text('Second list item $index')))),
                    itemCount: 25,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

當 List1 滾動時，我需要使串列 2 滾動，例如控制 list2 滾動的速度（不同的滾動速度）或反轉例如方向。

在 Fultter 有沒有一種簡單的方法可以做到這一點？

uj5u.com熱心網友回復：

您可以通過向您的喜歡添加偵聽器來輕松實作這ScrollController一點：

controller: scrollConroller1..addListener(() {
 scrollConroller2.animateTo(scrollConroller1.offset,
 curve: Curves.easeInOut,
 duration: const Duration(milliseconds: 450));
}),

基本上，您聆聽滾動更改并將其分配給Offset另一個串列。但是，當第一個串列的長度大于第二個串列時，第二個串列將繼續在底部彈跳（在 iOS 設備上）。您可以通過檢查第一個串列的偏移量是否大于第二個串列的偏移來解決此問題maxScrollExtent：

controller: scrollConroller1..addListener(() {
 if (scrollConroller1.offset <= scrollConroller2.position.maxScrollExtent){
  scrollConroller2.animateTo(scrollConroller1.offset,
  curve: Curves.easeInOut,
  duration: const Duration(milliseconds: 450));
 }
}),

uj5u.com熱心網友回復：

您可以在初始化狀態下添加一個偵聽器，以使 scrollConroller2 跳轉到 scrollConroller1 所在的位置，如下所示。

當第一個串列的偏移量大于第二個串列的 maxScrollExtent 時，歸功于esentis的修復：

@override
  void initState() {
    super.initState();
    //Your other code in init state
    scrollConroller1.addListener(() {
      if (scrollConroller1.offset <=
          scrollConroller2.position.maxScrollExtent) {
        setState(() {
          double value2 = scrollConroller1.offset;
          scrollConroller2.jumpTo(value2);
        });
      }
    });
  }

要反向滾動，您可以將偵聽器設定為：

scrollConroller1.addListener(() {
      if (scrollConroller1.offset <=
          scrollConroller2.position.maxScrollExtent) {
        setState(() {
          double value2 = scrollConroller2.position.maxScrollExtent -
              scrollConroller1.offset;
          scrollConroller2.jumpTo(value2);
        });
      }
    });

uj5u.com熱心網友回復：

為了控制串列滾動，同時保持將基于高度比的滾動偏移量，因此跳轉偏移量將是

jumpPoss = (math.min(l1maxHeight, l2maxHeight) * scrollOffset) /
          math.max(l1maxHeight, l2maxHeight);

   late ScrollController scrollController1 = ScrollController()
    ..addListener(() {
      double scrollOffset = scrollController1.offset;

      final double l1maxHeight = scrollController1.position.maxScrollExtent;
      final double l2maxHeight = scrollController2.position.maxScrollExtent;

      double jumpPoss = (math.min(l1maxHeight, l2maxHeight) * scrollOffset) /
          math.max(l1maxHeight, l2maxHeight);
      scrollController2.jumpTo((jumpPoss));
    });

如果您需要停止滾動最大限制，您可以按照@Tonny Bawembye 的回答。

標籤：扑 镖 颤振布局 颤振列表视图

上一篇：空值檢查運算子用于可空串列上的空值

下一篇：如何在顫動中調整影像的寬度？