Flutter设置页ListTile布局问题：页面空白无内容，求实现目标样式

我想要创建一个设置页面，但当前实现的页面完全空白，无任何内容显示，无法达到预期样式。请问该如何实现这种布局？

@override
Widget build(BuildContext context) {
  //print("called");
  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("Settings",
            style: TextStyle(color: Colors.white),
            textAlign: TextAlign.center)),
    body: Container(
      margin: const EdgeInsets.all(30.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: const BorderRadius.all(
            Radius.circular(5.0) //                 <--- border radius here
            ),
        color: Colors.white,
      ),
      child: Row(
        children: [
          Column(
            children: [
              ListTile(
                onTap: () {
                  if (kDebugMode) {
                    print("click");
                  }
                },
                leading: const Icon(
                  Icons.settings,
                  color: Colors.black,
                  size: 50.0,
                ),
                title: Text("Setting Version"),
                subtitle: Text("$settingVersion"),
              ),
              ListTile(
                onTap: () {
                  if (kDebugMode) {
                    print("click");
                  }
                },
                leading: const Icon(
                  Icons.access_time,
                  color: Colors.black,
                  size: 50.0,
                ),
                title: Text("Last change of the tag-version"),
                subtitle: Text("$lastChanged"),
              ),
            ],

          ),
          Column(
            children: [
              ListTile(
                onTap: () {
                  if (kDebugMode) {
                    print("click");
                  }
                },
                leading: const Icon(
                  Icons.settings,
                  color: Colors.black,
                  size: 50.0,
                ),
                title: Text("Version of something"),
                subtitle: Text("$settingVersion"),
              ),
              ListTile(
                onTap: () {
                  if (kDebugMode) {
                    print("click");
                  }
                },
                leading: const Icon(
                  Icons.access_time,
                  color: Colors.black,
                  size: 50.0,
                ),
                title: Text("My name of the user"),
                subtitle: Text("$lastChanged"),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

页面空白核心原因是布局约束缺失：Row和Column没有明确的尺寸限制，导致Flutter无法计算组件渲染空间。以下是具体修复步骤：

1. 先排查变量初始化问题 #

确保settingVersion和lastChanged已被赋值（比如初始化为空字符串""或具体内容），避免因空值导致Text组件抛出异常。

2. 给布局添加明确约束 #

给Row内的Column包裹Expanded，让它们平分可用宽度；同时给Column设置mainAxisSize: MainAxisSize.min，避免占用多余垂直空间：

修改后的核心布局代码：

body: Container(
  margin: const EdgeInsets.all(30.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: const BorderRadius.all(Radius.circular(5.0)),
    color: Colors.white,
  ),
  // 添加内边距，避免内容贴容器边框
  padding: const EdgeInsets.all(8.0),
  child: Row(
    children: [
      Expanded(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ListTile(
              onTap: () {
                if (kDebugMode) print("click");
              },
              leading: const Icon(Icons.settings, color: Colors.black, size: 50.0),
              title: const Text("Setting Version"),
              subtitle: Text("$settingVersion"),
            ),
            ListTile(
              onTap: () {
                if (kDebugMode) print("click");
              },
              leading: const Icon(Icons.access_time, color: Colors.black, size: 50.0),
              title: const Text("Last change of the tag-version"),
              subtitle: Text("$lastChanged"),
            ),
          ],
        ),
      ),
      Expanded(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ListTile(
              onTap: () {
                if (kDebugMode) print("click");
              },
              leading: const Icon(Icons.settings, color: Colors.black, size: 50.0),
              title: const Text("Version of something"),
              subtitle: Text("$settingVersion"),
            ),
            ListTile(
              onTap: () {
                if (kDebugMode) print("click");
              },
              leading: const Icon(Icons.access_time, color: Colors.black, size: 50.0),
              title: const Text("My name of the user"),
              subtitle: Text("$lastChanged"),
            ),
          ],
        ),
      ),
    ],
  ),
),

3. 小屏幕适配（可选） #

如果需要在手机等窄屏设备上自动换行，可将Row替换为Wrap组件，配合固定宽度实现响应式布局：

child: Wrap(
  spacing: 16.0, // 两列之间的间距
  children: [
    SizedBox(
      width: MediaQuery.of(context).size.width / 2 - 40, // 计算适配宽度
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [/* ListTile 内容 */],
      ),
    ),
    SizedBox(
      width: MediaQuery.of(context).size.width / 2 - 40,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [/* ListTile 内容 */],
      ),
    ),
  ],
),

• 查看控制台是否有资源加载错误（如assets/logo.png找不到）或变量未初始化报错
• 确保Container的padding和margin设置合理，避免内容被遮挡
• 通过Expanded、SizedBox等组件给子元素提供明确的尺寸约束

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