垂直时间表颤动

Question

我是 Flutter 的新手，我非常喜欢这个框架。但是，我一直卡在以下内容中：

问题：用户需要能够预订某些体育资产。我决定采用以下关于 UI.

的方法

概念布局

布局中有一排资产名称。之后是 vertical 垂直滚动行（所有行同时滚动，以便轻松查找空闲位置）。这些垂直滚动条包含预订信息，可让您滚动浏览一天中的所有时间。

我试着找到一个现有的布局来帮助我，遗憾的是没有运气。尝试了我自己的一些方法（水平列表视图和垂直列表视图）我没有设法解决这个问题。

我现在的问题如下：

我是不是错过了一个已经解决了这个问题的框架？
如何在垂直列表视图中分隔项目（关于时间 'slots'）？使用带边距的容器似乎有点苛刻。
是否可以将所有垂直列表视图相互同步？

非常感谢任何提示或答案！

Answer 1

经过更多的研究，我找到了解决这个问题的方法。

垂直列表

为了构建垂直列表，我使用了以下代码。这为一项资产构建了一个时间表。

const totalWidth = 2400.0; // Constant for all calculations. 24 hours in a day! 100 pixels per hour.
Widget _createTimetable(SomeData data) {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.all(2),
          decoration: BoxDecoration(
              color: Colors.grey,
          ),
          width: double.infinity,
          child: Text("${data.name}", style: TextStyle(color: Colors.white)),
        ),
        Container(
            height: 40, // Fixed height
            child: ListView(
              scrollDirection: Axis.horizontal,
              controller: _controllers[data.name], // Controller, see next section
              physics: ClampingScrollPhysics(),
              shrinkWrap: true,
              children: [
                Container(
                  width: totalWidth,
                  color: Colors.white,
                  child: Stack(
                    children: [Positioned(left: timeOfsset), bottom: 0, top: 0, child: <Some Container>]
                  )),
              ]
            )
        )
      ],
    );

此方法使用具有静态宽度的容器。此容器放入 ListView 中以使其可滚动。该容器又包含一个 Stack 小部件。此小部件允许使用 Positioned 小部件放置小部件。这样做的好处是它们不会互相干扰。这使得定位相当容易（在做一些数学之后！）。

链接列表

为了 link 每个列表的 ListController 对象，我使用了 linked_scroll_controller 包。这允许您一起生成控制器和 link 它们。确保在处理小部件时处理它们。

为了在顶部获取时间戳，我使用了一个额外的垂直视图，使用相同的方法。它 link 与其他控制器一起编辑。

结论

我认为这个解决方案还不理想。但是，它有效！对于'reservations'的offSet和width的计算，做了一些辅助函数。他们考虑了总宽度。

原来如此！希望这会在将来帮助其他人。如果您有任何改进，请随时发表评论或编辑。

垂直时间表颤动

Vertical timetable flutter

flutter

flutter-layout

垂直列表

链接列表

结论