Flutter---ListTile列表项组件
概述：ListTile 是 Flutter 中一个非常常用的 Material Design 列表项组件，专门用于构建列表中的每一项。
基本属性：
ListTile(leading: Icon(Icons.person), // 前导图标title: Text('用户名'), // 主标题subtitle: Text('用户昵称'), // 副标题trailing: Icon(Icons.arrow_forward), // 后置图标onTap: () {}, // 点击事件
)完整属性列表
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, // 焦点节点
)使用例子
//========================修改性别的弹窗========================================//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("女");// 调用回调函数，传值回主页},),],),),);},);}