Flutter中如何为timeline widget所在容器添加筛选按钮实现事件过滤

你只需要调整原有标题区域的布局结构，把纯文本展示的容器改为左右排列的Row布局即可，具体改动如下：

改动点说明 #

• 将原来包裹标题文字的Container的child从单Text改为Row，设置主轴对齐方式为两端对齐，左边放标题文本，右侧放筛选按钮
• 给筛选按钮绑定点击事件，在事件中实现你的筛选逻辑，筛选完成后调用setState更新_userDetails列表就能自动刷新timeline展示内容

修改后完整代码 #

Expanded(
  child: Padding(
    padding: EdgeInsets.fromLTRB(7, 0, 7, 7),
    child: Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border.all(width: 1.5),
        borderRadius: BorderRadius.circular(25)
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 改动的标题区域
          Container(
            height: 45,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 2),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  "история событий", 
                  style: TextStyle(fontSize: 25.0, color: Colors.blueGrey)
                ),
                // 新增的筛选按钮，样式可以自己调整
                IconButton(
                  onPressed: () {
                    // 这里写你的筛选逻辑，筛选完成后调用setState更新_userDetails即可
                    // 示例：筛选符合条件的事件
                    // setState(() {
                    //   _userDetails = _userDetails.where((item) => 你的筛选条件).toList();
                    // });
                  },
                  icon: Icon(Icons.filter_alt, color: Colors.blueGrey),
                )
              ],
            ),
          ),
          Expanded(
            child: Scrollbar(
              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(_userDetails[index].date),
                        ),
                        contentsBuilder: (context, index) => Card(
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(_userDetails[index].event),
                          ),
                        ),
                        connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
                        indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
                        itemCount: _userDetails.length,
                      ),
                    )
                  ),
                ],
              )
            )
          ),
        ],
      )
    )
  )
)

如果你需要按钮是文字样式或者其他自定义样式，把IconButton替换成对应组件即可，比如TextButton、ElevatedButton都可以，只要放在Row的右侧位置就行。

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