如何构建包含指定内容的Container组件，使用ListTile未生效该如何解决

ListTile的布局结构固定，无法灵活自定义子元素间距、排列样式，没法满足你的自定义Container需求，直接用Container组合Row、Column基础布局组件就能实现对应效果，实现方案如下：

实现效果对应图 #

实现思路 #

• 外层用Container设置整体的背景色、圆角、内外边距、阴影效果
• 内部用Row做水平布局，拆分出左侧图标/头像区、中间文本区、右侧操作区三个模块
• 中间文本区用Column做垂直布局，分别放置标题、副标题、说明文本，按需调整样式和间距

完整示例代码 #

Container(
  // 卡片整体内外边距
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  // 卡片样式配置
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    // 可按需添加阴影效果
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.1),
        blurRadius: 4,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 左侧图标区域
      Container(
        width: 48,
        height: 48,
        decoration: BoxDecoration(
          color: Colors.blue.shade100,
          borderRadius: BorderRadius.circular(8),
        ),
        child: const Icon(Icons.person, color: Colors.blue, size: 28),
      ),
      const SizedBox(width: 12),
      // 右侧文本区域，套Expanded避免长文本溢出
      const Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "用户名",
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(height: 4),
            Text(
              "用户身份/副标题",
              style: TextStyle(
                fontSize: 14,
                color: Colors.grey,
              ),
            ),
            SizedBox(height: 6),
            Text(
              "这是附加的说明内容，可根据实际需求调整文本长度、样式和行间距",
              style: TextStyle(
                fontSize: 13,
                color: Colors.black54,
              ),
            ),
          ],
        ),
      ),
      const SizedBox(width: 12),
      // 右侧操作区域，可替换为按钮、复选框等组件
      Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey.shade400),
    ],
  ),
)

自定义调整说明 #

• 修改外层Container的decoration属性即可调整卡片的圆角、背景色、阴影效果
• 各模块之间的间距通过SizedBox的宽高调整，文本行间距可以通过SizedBox或者Text的height属性调整
• 可以根据需求替换左侧图标、右侧操作区的组件，灵活度远高于固定布局的ListTile

内容的提问来源于stack exchange，提问作者Aniekan-abasi Akpakpan