Flutter事件历史容器添加滚动时固定居中日志名称表头实现求助

我正在开发一个可翻阅查看Istria事件的页面，目前事件整体显示效果符合预期，但遇到了一个问题：我需要为这个「History Event」容器添加一个居中的表头，要求该表头在页面滚动时保持固定不位移，尝试了多种方式都无法实现。

当前页面效果 #

现有实现代码 #

Expanded(
    child: Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(border: Border.all(width: 2), borderRadius: BorderRadius.circular(25)),
      child: Scrollbar(
          child: new ListView(
            shrinkWrap: true,
            children: [
              Container(
            alignment: Alignment.bottomLeft,
                  child: FixedTimeline.tileBuilder(
                    theme: TimelineThemeData(
                      nodePosition: 0.23,
                      color: Colors.blueGrey,
                      indicatorTheme: IndicatorThemeData(
                        position: 2,
                        size: 20.0,
                      ),
                      connectorTheme: ConnectorThemeData(
                        thickness: 2.5,
                      ),
                    ),
                    builder: TimelineTileBuilder.connectedFromStyle(
                      contentsAlign: ContentsAlign.basic,
                      oppositeContentsBuilder: (context, index) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('21.09.16 \ 14:48'),
                      ),
                      contentsBuilder: (context, index) => Card(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('история событий (тестовое событие)(тестовое событие)'),
                        ),
                      ),
                      connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
                      indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
                      itemCount: 10,
                    ),
                  )
    ),
            ],
          )),
    )
)

期望实现效果 #

你只需要把原来的ListView结构调整为表头+滚动区域分离的Column结构即可，具体修改逻辑如下：

1. 原容器内部的Scrollbar子节点从ListView替换为Column，设置mainAxisSize: MainAxisSize.max撑满容器高度
2. 第一个子节点放置固定居中的表头，按需设置内边距和文字样式
3. 第二个子节点用Expanded包裹原来的时间线ListView，滚动时仅列表部分位移，表头保持固定在顶部

修改后的完整代码如下：

Expanded(
  child: Container(
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border.all(width: 2), 
      borderRadius: BorderRadius.circular(25)
    ),
    child: Scrollbar(
      // 外层替换为Column，分离固定区域和滚动区域
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          // 固定表头部分
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: Text(
              "History Event",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold
              ),
            ),
          ),
          // 可滚动的时间线部分，用Expanded撑满剩余高度
          Expanded(
            child: ListView(
              shrinkWrap: true,
              children: [
                Container(
                  alignment: Alignment.bottomLeft,
                  child: FixedTimeline.tileBuilder(
                    theme: TimelineThemeData(
                      nodePosition: 0.23,
                      color: Colors.blueGrey,
                      indicatorTheme: IndicatorThemeData(
                        position: 2,
                        size: 20.0,
                      ),
                      connectorTheme: ConnectorThemeData(
                        thickness: 2.5,
                      ),
                    ),
                    builder: TimelineTileBuilder.connectedFromStyle(
                      contentsAlign: ContentsAlign.basic,
                      oppositeContentsBuilder: (context, index) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('21.09.16 \ 14:48'),
                      ),
                      contentsBuilder: (context, index) => Card(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('история событий (тестовое событие)(тестовое событие)'),
                        ),
                      ),
                      connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
                      indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
                      itemCount: 10,
                    ),
                  )
                ),
              ],
            ),
          )
        ],
      ),
    ),
  )
)

如果需要表头和下方列表之间增加分割线，在表头Padding的下方添加Divider组件即可。

内容的提问来源于stack exchange，提问作者Andrii Havrylyak