Flutter---ListTile列表项组件

概述：ListTile 是 Flutter 中一个非常常用的 Material Design 列表项组件，专门用于构建列表中的每一项。

基本属性：

Dart 复制代码

ListTile(
  leading: Icon(Icons.person),        // 前导图标
  title: Text('用户名'),               // 主标题
  subtitle: Text('用户昵称'),          // 副标题
  trailing: Icon(Icons.arrow_forward), // 后置图标
  onTap: () {},                       // 点击事件
)

完整属性列表

Dart 复制代码

ListTile(
  // 1. 内容区域
  leading: Widget,                    // 左侧部件
  title: Widget,                      // 主标题
  subtitle: Widget,                   // 副标题
  trailing: Widget,                   // 右侧部件
  
  // 2. 交互相关
  onTap: () => void,                  // 点击回调
  onLongPress: () => void,            // 长按回调
  onFocusChange: (bool) => void,      // 焦点变化
  onTap: () => void,                  // 点击回调
  mouseCursor: MouseCursor,           // 鼠标样式
  enabled: bool,                      // 是否启用
  
  // 3. 样式相关
  style: ListTileStyle,               // 样式类型
  selected: bool,                     // 选中状态
  selectedColor: Color,               // 选中颜色
  iconColor: Color,                   // 图标颜色
  textColor: Color,                   // 文字颜色
  contentPadding: EdgeInsets,         // 内边距
  dense: bool,                        // 紧凑模式
  visualDensity: VisualDensity,       // 视觉密度
  shape: ShapeBorder,                 // 形状
  tileColor: Color,                   // 背景色
  selectedTileColor: Color,           // 选中背景色
  focusColor: Color,                  // 焦点颜色
  hoverColor: Color,                  // 悬停颜色
  splashColor: Color,                 // 水波纹颜色
  horizontalTitleGap: double,         // 标题水平间距
  minVerticalPadding: double,         // 最小垂直内边距
  minLeadingWidth: double,            // 最小前导宽度
  
  // 4. 辅助功能
  autofocus: bool,                    // 自动聚焦
  focusNode: FocusNode,               // 焦点节点
)

使用例子

Dart 复制代码

//========================修改性别的弹窗========================================//
  void changeGenderDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          backgroundColor: Colors.white, //背景颜色
          shape: RoundedRectangleBorder( //形状配置
            borderRadius: BorderRadius.circular(26),
          ),
          child: Container(
            width: 250, // 自定义宽度
            padding: EdgeInsets.all(16), // 内边距
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [

                // 男性选项
                ListTile(
                  dense: true, //紧凑模式
                  title: Text("男", style: TextStyle(fontSize: 16, color: Color(0xFF3D3D3D))),
                  trailing: _selectedGender == "男" //只有选中"男",才显示男性行尾部图标(三元运算符)
                      ? Image.asset("assets/images/cherry.png", width: 24, height: 24)
                      : null,
                  //点击事件
                  onTap: () {
                    Navigator.pop(context);//关闭对话框
                    setState(() {
                      _selectedGender = "男"; //更新性别变量值
                    });
                    widget.onGenderChanged("男");// 调用回调函数，传值回主页
                  },
                ),

                // 女性选项
                ListTile(
                  dense: true,//紧凑模式
                  title: Text("女", style: TextStyle(fontSize: 16, color: Color(0xFF3D3D3D))),
                  trailing: _selectedGender == "女" //只有选中"女",才显示女性行尾部图标
                      ? Image.asset("assets/images/cherry.png", width: 24, height: 24)
                      : null,
                  onTap: () {
                    Navigator.pop(context);
                    setState(() {
                      _selectedGender = "女";  //更新性别变量值
                    });
                    widget.onGenderChanged("女");// 调用回调函数，传值回主页
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }