Flutter容器无法添加更多组件：实现目标UI布局求助

要完成图中的UI设计，你需要将Container的子组件从Row改为Column，以此容纳上下两部分内容（游戏信息区、分隔线+操作区），具体修改如下：

修改后的完整代码 #

import 'dart:math';
import 'package:flutter/material.dart';
import 'disability_page.dart';

class DecisionMakingPage extends StatefulWidget {
  const DecisionMakingPage({super.key});

  @override
  State<DecisionMakingPage> createState() => _DecisionMakingPageState();
}

class _DecisionMakingPageState extends State<DecisionMakingPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {
            Navigator.of(context).push(
                MaterialPageRoute(builder: (context) => DisabilityPage()));
          },
          icon: const Icon(Icons.arrow_back_ios_new_rounded),
        ),
        backgroundColor: Theme.of(context).colorScheme.background,
        elevation: 0,
      ),
      backgroundColor: Theme.of(context).colorScheme.background,
      body: ListView(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 35, top: 24),
            child: Text(
              "Decision Making",
              style: TextStyle(
                 color: Theme.of(context).colorScheme.onSecondary,
                fontSize: 16,
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 35, top: 0),
            child: Text(
              "Select a Game",
              style: TextStyle(
                color: Theme.of(context).colorScheme.onPrimary,
                fontSize: 36,
              ),
            ),
          ),
          Container(
            height: 180, // 调整高度以容纳新增内容
            margin: const EdgeInsets.only(top: 45, left: 35, right: 35),
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.primary,
              borderRadius: BorderRadius.circular(15),
            ),
            child: Column(
              children: [
                // 原有游戏信息区
                Expanded(
                  child: Row(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(top: 35,left: 30),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Tetris Game",
                              style: TextStyle(
                                  color: Theme.of(context).colorScheme.onPrimary, fontSize: 22),
                            ),
                            Text("Level 1",
                              style: TextStyle(
                                color: Theme.of(context).colorScheme.onSecondary, fontSize: 13
                                ),
                              ),
                          ],
                        ),
                      ),
                      const Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(left: 50, bottom: 40, top: 10),
                          child: Image(
                            image: AssetImage("lib/assests/images/tetris_game.png"),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                // 分隔线
                Divider(
                  color: Theme.of(context).colorScheme.onSecondary.withOpacity(0.3),
                  thickness: 1,
                  indent: 30,
                  endIndent: 30,
                ),
                // 新增操作区（按钮+右侧文本）
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // 左侧按钮
                      ElevatedButton(
                        onPressed: () {
                          // 按钮点击逻辑
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Theme.of(context).colorScheme.secondary,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                        child: Text(
                          "Start",
                          style: TextStyle(
                            color: Theme.of(context).colorScheme.onPrimary,
                            fontSize: 14,
                          ),
                        ),
                      ),
                      // 右侧文本
                      Text(
                        "Completed",
                        style: TextStyle(
                          color: Theme.of(context).colorScheme.onSecondary,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 将Container的子组件从Row改为Column，实现垂直方向布局，容纳游戏信息、分隔线和操作区三部分内容
• 调整Container高度，确保新增内容能完整显示
• 添加Divider作为分隔线，通过indent和endIndent控制左右边距，用opacity调整颜色深浅匹配设计风格
• 新增Row布局操作区，使用MainAxisAlignment.spaceBetween让按钮和文本分别对齐左右两侧
• 根据主题色配置按钮和文本样式，保证整体风格统一

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