颤振:同步列表视图滚动位置

我试图给这个屏幕一个特定的滚动行为。每一行都有使用BLoC模式提供给它的数据。屏幕的左侧只需要垂直滚动,而右侧需要水平和垂直滚动。我目前正在做的是有两个独立的列表视图,用于垂直滚动和共享BLoC。然后,右侧小部件包装在一个向相反方向移动的列表视图中。

class ComposePage extends StatefulWidget {
  @override
  _ComposePageState createState() => _ComposePageState();
}

class _ComposePageState extends State<ComposePage> {
  final TrackingScrollController _scrollController = TrackingScrollController();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          print("SCROLL");

_scrollController.position.setPixels(notification.metrics.pixels);
          for (ScrollPosition position in _scrollController.position)
            position.setPixels(notification.metrics.pixels);
        },
        child: Column(
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Expanded(
              flex: 8,
              child: Material(
                type: MaterialType.canvas,
                elevation: 1.0,
                child: _buildBuildComposeContent(_scrollController),
              ),
            ),
            Expanded(
              flex: 1,
              child: Material(
                type: MaterialType.canvas,
                elevation: 20.0,
                child: ControlsHeader(),
              ),
            )
          ],
        ),
      ),
      color: Colors.green,
    );
  }

  _buildBuildComposeContent(TrackingScrollController scrollController) {
    return Container(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: _buildLabelArea(scrollController),
          ),
          Expanded(
            flex: 7,
            child: _buildEditArea(scrollController),
          ),
        ],
      ),
    );
  }

  Column _buildLabelArea(TrackingScrollController controller) {
    return Column(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.pink,
          ),
        ),
        Expanded(
          flex: 8,
          child: ListView(
            scrollDirection: Axis.vertical,
            controller: controller,
            children: <Widget>[
              BlocProvider(
                bloc: TrackBloc(),
                child: TrackLabel(),
              ),
              BlocProvider(
                bloc: TrackBloc(),
                child: TrackLabel(),
              ),
              BlocProvider(
                bloc: TrackBloc(),
                child: TrackLabel(),
              ),
              BlocProvider(
                bloc: TrackBloc(),
                child: TrackLabel(),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Column _buildEditArea(TrackingScrollController controller) {
    return Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Playhead(),
        ),
        Expanded(
          flex: 8,
          child: Container(
            child: ListView(
              scrollDirection: Axis.vertical,
              controller: controller,
              children: <Widget>[
                BlocProvider(
                  bloc: TrackBloc(),
                  child: TrackView(isEditable: true),
                ),
                BlocProvider(
                  bloc: TrackBloc(),
                  child: TrackView(isEditable: true),
                ),
                BlocProvider(
                  bloc: TrackBloc(),
                  child: TrackView(isEditable: true),
                ),
                BlocProvider(
                  bloc: TrackBloc(),
                  child: TrackView(isEditable: true),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}