Question

这是Row中包含2个DropdownButtonFormField

的代码

return Form(
    key: _formKey,
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Flexible(
                child: DropdownButtonFormField(
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.fromLTRB(0, 5.5, 0, 0),
                      labelStyle: TextStyle(),
                      labelText: 'Gender'),
                  items: _genders,
                  value: client.gender,
                  onChanged: (value) {
                    setState(() {
                      client.gender = value;
                    });
                  },
                ),
              ),
              SizedBox(width: formFieldSpace),
              Flexible(
                child: DropdownButtonFormField(
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.fromLTRB(0, 5.5, 0, 0),
                    labelText: 'Marital Status',
                  ),
                  items: _maritals,
                  value: client.maritalStatus,
                  onChanged: (value) {
                    setState(() {
                      client.maritalStatus = value;
                    });
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );

这些是列表数据：

List<DropdownMenuItem<String>> _genders = [
    DropdownMenuItem(
      child: new Text("Male"),
      value: "Male",
    ),
    DropdownMenuItem(
      child: new Text("Female"),
      value: "Female",
    ),
  ];

  List<DropdownMenuItem<String>> _maritals = [
    DropdownMenuItem(
      child: new Text("Single"),
      value: "Single",
    ),
    DropdownMenuItem(
      child: new Text("Married"),
      value: "Married",
    ),
  ];

它看起来像图像中的那个。我的问题是如何删除装饰器labelText（例如Gender）和标记为“ Male”的下拉按钮之间的多余空间。

我不能使用ConstrainedBox，因为它需要我设置宽度和高度。即使我将宽度设置为double.infinity

Answer 1

DropdownButtonFormField不能根据您的要求进行自定义。 Re: stack overflow answer

选项1 更新您的DropdownMenuItems的TextStyle

List<DropdownMenuItem<String>> _genders = new List();
_genders.add(DropdownMenuItem<String>(
  value: 'Male',
  child: Text(
    'Male',
    style: TextStyle(height: 0.0),
  ),
));
_genders.add(DropdownMenuItem<String>(
  value: 'Female',
  child: Text(
    'Female',
    style: TextStyle(height: 0.0),
  ),
));

选项＃2 改用DropdownButton

Form(
  key: _formKey,
  child: SingleChildScrollView(
    padding: EdgeInsets.all(10),
    child: Row(
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Gender',
              style: TextStyle(),
            ),
            DropdownButton(
              items: _genders,
              value: client.gender,
              onChanged: (value) {
                setState(() {
                  client.gender = value;
                });
              },
            ),
          ],
        ),
        SizedBox(width: 10.0),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Marital Status',
              style: TextStyle(),
            ),
            DropdownButton(
              items: _maritals,
              value: client.maritalStatus,
              onChanged: (value) {
                setState(() {
                  client.maritalStatus = value;
                });
              },
            ),
            SizedBox(width: 10.0),
          ],
        ),
      ],
    ),
  ),
);

您也可以参考此链接以获取新的想法 HOW TO CHANGE THE ITEM TEXT SIZE OF A DROPDOWNBUTTON IN FLUTTER

Flutter DropdownButtonFormField labelText和下拉间距问题

1 个答案: