flutter - 具有固定页眉的双向滚动

Question

我想实现带有固定标题的双向滚动 View 。例如，您可以在excel工作表中找到它的方式:



有谁知道我可以使用的包装或小部件吗？
还是我必须自己实现这种逻辑？
如果是这样，您能给我一些从哪里开始的提示吗？

我发现的唯一有用的东西是:https://pub.dev/packages/bidirectional_scroll_view
但是此解决方案不支持 header 。

希望你有美好的一天;希望你今天过得很开心 !
丹尼斯

Answer 1

这是利用scrollListener提供的BidirectionalScrollBiewPlugin的可能解决方案:

ScrollController _horizontalController = ScrollController();
ScrollController _verticalController = ScrollController();

@override
Widget build(BuildContext context) {
  return Stack(
    children: <Widget>[
      BidirectionalScrollViewPlugin(
        child: Container(
          alignment: Alignment.topLeft,
          margin: EdgeInsets.only(top: 15, left: 20),
          width: 1000,
          height: 1000,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text('test asdasd asdqwdqwdqeqweqw eqweqeqweqweqwe'),
              Text('test asdasd asdqwdqwdqeqweqw eqweqeqweqweqwe'),
              Text('test asdasd asdqwdqwdqeqweqw eqweqeqweqweqwe'),
              Text('test asdasd asdqwdqwdqeqweqw eqweqeqweqweqwe'),
            ],
          )
        ),
        scrollListener: directionalScrollListener,
      ),
      Container(
        height: 18,
        color: Colors.white,
        padding: const EdgeInsets.only(left: 10.0),
        child: ListView(
          controller: _horizontalController,
          scrollDirection: Axis.horizontal,
          children: List.generate(200, (index) {
            return Container(
              padding: EdgeInsets.only(left: 5, right: 5, top: 2, bottom: 2),
              child: Text(index.toString()),
            );
          }),
        ),
      ),
      Container(
        width: 20,
        color: Colors.white,
        margin: const EdgeInsets.only(top: 16.0),
        child: ListView(
          controller: _verticalController,
          scrollDirection: Axis.vertical,
          children: List.generate(200, (index) {
            return Container(
              padding: EdgeInsets.only(left: 2, right: 2, top: 5, bottom: 5),
              child: Text(index.toString()),
            );
          }),
        ),
      ),
    ],
  );