Flutter新手求助：如何实现Row组件内部嵌套Column的布局效果

核心问题 #

你当前的代码把复选框、提示文本、两个输入框都放在同一层级的Row中，所有元素默认横向排列，导致两个输入框并排展示，和预期的上下排列效果不符。

调整逻辑 #

• 原有Row保留，左侧放置复选框和Enable 1文本作为固定区域
• 新增Column组件作为Row的右侧子元素，用来纵向放置两个输入框
• 用Expanded包裹右侧的Column，使其占满Row剩余的横向空间，避免输入框溢出

调整后代码 #

body: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Expanded(
          flex: 3,
          child: Container(
            padding: EdgeInsets.all(20.0),
            color: Colors.cyan,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Checkbox(
                  value: false,
                  onChanged: (bool? value) {
                    setState(() {
                      print(value!);
                    });
                  },
                ),
                const Text("Enable 1"),
                // 用Expanded包裹Column，占满Row右侧剩余空间
                Expanded(
                  child: Padding(
                    // 输入框区域和左侧文本拉开间距
                    padding: const EdgeInsets.only(left: 16),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        TextField(
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'username',
                          ),
                        ),
                        const SizedBox(height: 12), // 两个输入框的间隔
                        TextField(
                          obscureText: true,
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'password',
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          )
      ),
      Expanded(
        flex: 1,
        child: Container(
          child: ElevatedButton.icon(
            icon: const Icon(
              Icons.save_alt,
              color: Colors.green,
              size: 24.0,
            ),
            label: const Text('Save'),
            onPressed: () {
              print('pressed');
            },
            style: ButtonStyle(
              backgroundColor:
              MaterialStateProperty.all<Color>(Colors.greenAccent),
            ),
          ),
        ),
      )
    ]
)

可选优化 #

代码中新增的间距数值可以根据你的设计需求自由调整，给固定组件加const修饰也可以小幅提升页面渲染性能。

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