Flutter实现动态横向ListView并默认选中首个元素的方法咨询

核心实现逻辑依赖StatefulWidget的状态维护，初始化选中索引默认设为0即可满足页面加载完成后默认选中第一个元素的需求，无需引入第三方依赖。

实现步骤 #

• 定义状态变量：在State类中声明列表数据源和当前选中索引变量，索引初始值设置为0

  // 示例列表数据源，可根据业务需求替换为自定义实体类
  final List<String> _tagList = ["全部", "待付款", "待发货", "待收货", "已完成"];
  // 初始值为0，默认选中第一个元素
  int _currentSelectedIndex = 0;
  

• 构建横向滚动容器：使用ListView设置scrollDirection: Axis.horizontal实现横向滚动，列表项使用GestureDetector/InkWell包裹自定义Container实现点击交互，无需使用Button组件
• 动态渲染样式：列表项的背景色、边框、文字样式根据当前选中索引动态调整，区分选中和未选中状态

完整可运行示例代码 #

import 'package:flutter/material.dart';

class HorizontalSelectableList extends StatefulWidget {
  const HorizontalSelectableList({super.key});

  @override
  State<HorizontalSelectableList> createState() => _HorizontalSelectableListState();
}

class _HorizontalSelectableListState extends State<HorizontalSelectableList> {
  final List<String> _tagList = ["全部", "待付款", "待发货", "待收货", "已完成"];
  int _currentSelectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // 固定列表高度，可根据业务调整
      height: 40,
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.symmetric(horizontal: 16),
        itemCount: _tagList.length,
        // 配置两个列表项之间的间距
        separatorBuilder: (context, index) => const SizedBox(width: 12),
        itemBuilder: (context, index) {
          final bool isSelected = index == _currentSelectedIndex;
          return GestureDetector(
            onTap: () {
              // 点击切换选中状态
              setState(() {
                _currentSelectedIndex = index;
              });
              // 此处可补充选中后的业务逻辑
            },
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
              decoration: BoxDecoration(
                // 选中态背景色、边框和未选中态做区分
                color: isSelected ? Colors.blueAccent : Colors.white,
                borderRadius: BorderRadius.circular(20),
                border: Border.all(
                  color: isSelected ? Colors.blueAccent : Colors.grey.shade300,
                  width: 1,
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                _tagList[index],
                style: TextStyle(
                  color: isSelected ? Colors.white : Colors.black87,
                  fontSize: 14,
                  fontWeight: isSelected ? FontWeight.w500 : FontWeight.normal,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

可选优化点 #

• 如需点击水波纹效果，可将GestureDetector替换为InkWell组件，同时将Container的背景色配置挪到InkWell的decoration属性中即可
• 如果列表元素数量固定且不会超出屏幕宽度，可将ListView替换为Row组件，无需滚动能力

内容的提问来源于stack exchange，提问作者Tanya Thakur