Flutter实现国家代码下拉框与手机号输入框并排显示问题

我看了你的代码，问题主要出在布局结构的处理上，导致国家代码下拉框和手机号输入框没法正确并排，甚至引发布局异常。让我帮你一步步修复：

原代码的核心问题 #

• 布局结构错误：你把手机号输入框放在了Row外面，根本没和国家代码下拉框放在同一行；而且Row内部嵌套了不必要的Expanded和Row，导致布局约束冲突，容易引发控件消失或崩溃。
• 间距使用错误：在Row（水平布局容器）里用了SizedBox(height:18.0)，这是垂直方向的间距，应该用水平方向的SizedBox(width: ...)。
• 初始值可能引发异常：DropdownButton的初始值是空字符串，虽然列表里有这个选项，但空值有时会导致下拉框的布局计算出现问题。

修复后的完整代码 #

import 'package:flutter/material.dart';

class Signup extends StatefulWidget {
  Signup({Key key, this.title}) : super(key: key);
  final String title;

  @override
  SignupPage createState() => new SignupPage();
}

class SignupPage extends State<Signup> {
  List<String> _ccodes = <String>['+65', '+91', '+60', '+61']; // 移除空字符串选项
  String _ccode = '+65'; // 设置默认有效国家代码

  @override
  Widget build(BuildContext context) {
    final name = TextFormField(
      keyboardType: TextInputType.text,
      autofocus: false,
      initialValue: 'Techie Quickie',
      decoration: InputDecoration(
        hintText: 'Name',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final email = TextFormField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      initialValue: 'tq@gmail.com',
      decoration: InputDecoration(
        hintText: 'Email',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final password = TextFormField(
      keyboardType: TextInputType.text,
      obscureText: true,
      autofocus: false,
      initialValue: 'password',
      decoration: InputDecoration(
        hintText: 'Password',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final passwordConfirmation = TextFormField(
      keyboardType: TextInputType.text,
      obscureText: true,
      autofocus: false,
      initialValue: 'password',
      decoration: InputDecoration(
        hintText: 'Password Confirmation', // 修改提示文本区分确认密码
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final loginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 16.0),
      child: Material(
        borderRadius: BorderRadius.circular(30.0),
        shadowColor: Colors.lightBlueAccent.shade100,
        elevation: 5.0,
        child: MaterialButton(
          minWidth: 200.0,
          height: 42.0,
          onPressed: () {
            print("Signup button clicked");
          },
          color: Colors.lightBlueAccent,
          child: Text('Sign Up', style: TextStyle(color: Colors.white, fontSize: 20.0)),
        ),
      ),
    );

    final countryCode = DropdownButton<String>(
      value: _ccode,
      isDense: true,
      items: _ccodes.map((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
      onChanged: (String newValue) {
        setState(() {
          _ccode = newValue;
        });
      },
    );

    final phonenumber = TextFormField(
      keyboardType: TextInputType.phone,
      autofocus: false,
      initialValue: '91166666',
      decoration: InputDecoration(
        hintText: 'Phone Number',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: ListView(
          padding: EdgeInsets.only(left: 24.0, right: 24.0),
          shrinkWrap: true,
          children: <Widget>[
            name,
            SizedBox(height: 18.0),
            email,
            SizedBox(height: 18.0),
            password,
            SizedBox(height: 18.0),
            passwordConfirmation,
            SizedBox(height: 18.0),
            // 核心修改：将国家代码和手机号放在同一Row中
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                countryCode,
                SizedBox(width: 8.0), // 水平方向的间距
                Expanded( // 让手机号输入框占满剩余宽度
                  child: phonenumber,
                ),
              ],
            ),
            SizedBox(height: 18.0),
            loginButton,
            SizedBox(height: 38.0),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

1. 调整布局结构：把countryCode和phonenumber放在同一个Row里，用Expanded包裹手机号输入框，确保它能占满剩余的水平空间，实现并排效果。
2. 修正间距：把Row里的垂直间距换成水平的SizedBox(width: 8.0)，符合Row的水平布局逻辑。
3. 优化DropdownButton初始值：移除了空字符串选项，设置默认值为+65，避免空值可能引发的布局异常。
4. 细节优化：修改了确认密码输入框的提示文本，让界面更清晰。

这样修改后，国家代码下拉框和手机号输入框就能稳定并排显示，不会再出现控件消失或崩溃的问题了。

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