如何在Flutter中实现参考图所示样式的列表菜单布局

你现有代码存在几个明显问题：属性位置写错（第一个ListTile把主标题放到了leading位）、默认Card组件的边距、阴影不符合目标样式、右侧文字和箭头没有垂直居中对齐。可以按照下面的方式调整实现：

实现代码 #

ListView(
  padding: EdgeInsets.zero,
  shrinkWrap: true,
  children: [
    // 第一个菜单项
    Container(
      decoration: const BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Color(0xFFEEEEEE), width: 0.5),
        ),
      ),
      child: ListTile(
        // 左侧主标题
        title: const Text(
          'List Item 1',
          style: TextStyle(fontSize: 16, color: Colors.black87),
        ),
        // 右侧内容区
        trailing: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            Text(
              'Full Service',
              style: TextStyle(fontSize: 14, color: Colors.black54),
            ),
            SizedBox(width: 8),
            Icon(
              Icons.arrow_forward_ios,
              size: 14,
              color: Colors.red,
            ),
          ],
        ),
        onTap: () {
          // 此处编写菜单项点击逻辑
        },
      ),
    ),
    // 第二个菜单项
    Container(
      decoration: const BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Color(0xFFEEEEEE), width: 0.5),
        ),
      ),
      child: ListTile(
        title: const Text(
          'List Item 2',
          style: TextStyle(fontSize: 16, color: Colors.black87),
        ),
        trailing: const Icon(
          Icons.arrow_forward_ios,
          size: 14,
          color: Colors.red,
        ),
        onTap: () {
          // 此处编写菜单项点击逻辑
        },
      ),
    ),
    // 更多菜单项按相同格式追加即可
  ],
)

关键调整说明 #

• 弃用默认Card组件，改用带底部分割线的Container实现列表项，避免默认Card的圆角、多余阴影、外边距问题，分割线粗细颜色更可控
• 右侧内容区用Row替代Wrap，设置mainAxisSize: MainAxisSize.min避免占满整行，crossAxisAlignment: CrossAxisAlignment.center保证文字和箭头垂直居中
• 统一调整文字大小、图标尺寸：主标题用16号字深灰色，右侧说明文字用14号字浅灰色，箭头图标缩小到14号和文字高度匹配
• 所有默认内边距用EdgeInsets.zero清空，和设计图边缘对齐效果一致
• 给ListTile加onTap回调实现点击交互，组件自带的Material风格点击水波纹效果会自动生效

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