Flutter开发：如何使TextFormField与DropdownMenu紧凑排列并调整圆形框间距

需求与现状 #

想要实现的设计效果：

当前实现效果：

作为Flutter新手，我有两个未实现的需求：

• 让TextFormField和DropdownMenu像目标图那样紧凑排列
• 让圆形头像框的间距与目标图一致

修改方案与优化代码 #

核心调整点 #

1. 头像区域布局优化：移除无效的Positioned组件（仅在Stack中生效），将头像与表单区域用Row分栏布局，精准控制头像和表单的间距。
2. 表单控件紧凑化：去掉TextFormField和DropdownButton外层多余的固定宽度设置，简化容器嵌套，统一两个控件的高度，调整内边距减少不必要留白。

优化后的完整代码 #

Container(
  padding: const EdgeInsets.symmetric(horizontal: 150),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      const SizedBox(height: 35),
      Container(
        width: double.infinity,
        margin: const EdgeInsets.fromLTRB(30, 0, 10, 20),
        padding: const EdgeInsets.all(30),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 头像区域
            Container(
              margin: const EdgeInsets.only(right: 40), // 控制头像与表单的间距
              child: FutureBuilder(
                future: _getSignedURL(widget.patientProfile.avatar),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.data == null) {
                    return Container(
                      width: 200,
                      height: 200,
                      decoration: BoxDecoration(
                        color: const Color.fromRGBO(255, 255, 255, 0.3),
                        border: Border.all(color: Colors.black12, width: 1.0),
                        borderRadius: BorderRadius.circular(200.0),
                      ),
                    );
                  } else {
                    return CircleAvatar(
                      radius: 100,
                      backgroundImage: NetworkImage(snapshot.data),
                    );
                  }
                },
              ),
            ),
            // 表单与按钮区域
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 保存按钮
                  Align(
                    alignment: Alignment.centerRight,
                    child: OutlinedButton(
                      style: OutlinedButton.styleFrom(
                        side: const BorderSide(color: Colors.blue, width: 1),
                        fixedSize: const Size(200, 50),
                      ),
                      child: const Text(
                        'Save Profile',
                        style: TextStyle(color: Colors.blue),
                      ),
                      onPressed: () => _updatePatientProfile(),
                    ),
                  ),
                  const SizedBox(height: 20),
                  // 表单行
                  Row(
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            const Text(
                              '* MRN',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                            const SizedBox(height: 8),
                            TextFormField(
                              style: const TextStyle(color: Colors.black),
                              controller: mrn,
                              onSaved: (String? value) {
                                if (value != null) mrn.text = value;
                              },
                              decoration: const InputDecoration(
                                border: OutlineInputBorder(),
                                hintText: 'MRN',
                                hintStyle: TextStyle(
                                    color: Colors.black, fontSize: 16),
                                contentPadding: EdgeInsets.symmetric(
                                    horizontal: 12, vertical: 16),
                              ),
                            )
                          ],
                        ),
                      ),
                      const SizedBox(width: 20), // 两个表单控件的横向间距
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            const Text(
                              '* Salutation',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 16),
                            ),
                            const SizedBox(height: 8),
                            Container(
                              height: 56, // 和TextFormField高度对齐
                              decoration: BoxDecoration(
                                border: Border.all(
                                    color: Colors.black12, width: 1.0),
                                borderRadius: BorderRadius.circular(5),
                              ),
                              child: DropdownButton<String>(
                                underline: Container(),
                                hint: _salutation == null
                                    ? const Text(
                                        '* Salutation',
                                        style: TextStyle(color: Colors.red),
                                      )
                                    : Text(_salutation),
                                isExpanded: true,
                                value: _salutation,
                                items: <String>['Mr.', 'Mrs.', 'Ms.']
                                    .map((String value) {
                                  return DropdownMenuItem<String>(
                                    value: value,
                                    child: Text(value),
                                  );
                                }).toList(),
                                onChanged: (value) {
                                  setState(() {
                                    _salutation = value!;
                                  });
                                },
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 12),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    ],
  ),
)

关键修改说明 #

• 用Row拆分头像与表单区域，通过margin控制间距，匹配目标图布局逻辑
• 移除无效的Wrap、冗余容器和非Stack中的Positioned，将保存按钮移至表单右上角
• 统一表单控件高度，通过固定间距的SizedBox控制标签与控件、控件之间的留白，实现紧凑排列
• 删除固定宽度限制，让控件自适应可用空间，避免布局溢出或留白过多

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