在 Flutter 中实现双向列表视图

Posted 2023-02-23

【中文标题】在 Flutter 中实现双向列表视图

【英文标题】：Implementing a bidirectional listview in Flutter

【发布时间】：2017-12-21 13:57:03

【问题描述】：

如何在 Flutter 中实现双向滚动视图？ ListView 有一个 scrollDirection 字段，但它只能采用 Axis.horizo​​ntal 或 Axis.vertical。可以两者兼得吗？

【参考方案1】：

这是使用外部SingleChildScrollView 的潜在解决方案。你也可以使用多个ListViews 中的一个PageView，如果你对屏幕外的ListViews 被拆除没意见。

import 'package:flutter/material.dart';

void main() 
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));


class MyHomePage extends StatelessWidget 
  Widget build(BuildContext context) 
    ThemeData themeData = Theme.of(context);
    return new Scaffold(
      body: new SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: new SizedBox(
          width: 1000.0,
          child: new ListView.builder(
            itemBuilder: (BuildContext context, int i) 
              return new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: new List.generate(5, (int j) 
                  return new Text("$i,$j", style: themeData.textTheme.display2);
                ),
              );
            ,
          ),
        ),
      ),
    );
  

【讨论】：

有趣。关于是否可以在对角线上滚动有什么想法吗？意思是水平和垂直滚动是同时进行的？

除非您有很多内容，否则我认为您应该只使用GestureDetector 在用户拖动时重新定位元素，而不是使其可滚动...... Scrollables 提供的主要内容当你到达终点时反弹物理和过度覆盖发光......你有多在乎？

哦，听起来重新定位元素确实是我需要的。所以我的内容会超出屏幕的水平和垂直限制。因此，无论我向哪个方向投掷或拖动，我都希望重新定位我的项目，同时在用户松开手指时添加减速以获得更自然的感觉

【参考方案2】：

查看我在this question 上发布并自行回答的答案。我不知道用单个 Scrollable 来做这件事的方法，尽管我可以想象它很有用。

你不能用无限长的ListView.builder轻松解决这个问题 因为它只向一个方向发展。如果你想同时包装 方向，可以模拟双向环绕 两个Viewports 中的Stack 走向相反的方向。

这个问题也有一个代码示例（如果你不想换行，你可能需要稍微修改一下答案）。

【讨论】：

我看过那个例子。但是，它只演示了无限滚动并且在一个方向上：垂直。它没有显示您也可以水平滚动的情况

哈哈没问题:)