Flutter设置UI布局求助：左侧图标右侧上下文本实现

你的问题根源在于这几个布局细节：

• 外层Container默认会占满Scaffold body的可用空间，导致视觉上占了整页
• Row使用MainAxisAlignment.spaceEvenly强制分散图标和文本区域，不符合预期的紧凑布局
• 右侧Column默认居中对齐，和主文本+小字左对齐的设计不符

直接修改代码即可实现目标布局：

class SettingRoute extends StatefulWidget {
  const SettingRoute({Key? key}) : super(key: key);

  @override
  State<SettingRoute> createState() => _SettingRoute();
}

class _SettingRoute extends State<SettingRoute> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.black,
        systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.black),
        leading: IconButton(
          icon: Image.asset('assets/logo.png'),
          onPressed: null,
        ),
        title: const Text("My App", style: TextStyle(color: Colors.white)),
      ),
      body: Container(
        margin: const EdgeInsets.all(30.0),
        width: double.infinity, // 让容器占满屏幕宽度，高度自适应内容
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
          color: Colors.white,
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center, // 图标与文本垂直居中对齐
            children: <Widget>[
              const Icon(
                Icons.access_time,
                color: Colors.black,
                size: 50.0,
              ),
              const SizedBox(width: 12), // 图标与文本区域的间距
              Column(
                crossAxisAlignment: CrossAxisAlignment.start, // 文本左对齐
                mainAxisSize: MainAxisSize.min, // Column高度随内容自适应
                children: const [
                  Text("Last change", style: TextStyle(color: Colors.black, fontSize: 16)),
                  SizedBox(height: 8), // 主文本与小字的间距
                  Text("2024-05-20 14:30", style: TextStyle(color: Colors.grey, fontSize: 12)),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键修改说明：

• 外层Container添加width: double.infinity，确保宽度占满屏幕，高度由子元素决定
• 用Padding统一控制内部间距，替代零散的margin设置，更简洁易维护
• Row改用CrossAxisAlignment.center实现图标与文本垂直居中，移除MainAxisAlignment.spaceEvenly避免元素过度分散
• 右侧Column设置crossAxisAlignment: CrossAxisAlignment.start让文本左对齐，mainAxisSize: MainAxisSize.min限制Column高度仅包裹内容
• 用SizedBox替代空Container控制间距，符合Flutter布局最佳实践

修改后就能实现左侧图标、右侧上主文本下小字的紧凑布局，容器高度自适应内容，不会再占满整页。

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