如何在颤动中为下拉按钮制作圆形边框？答案

【问题标题】：How to make rounded border for dropdownbutton in flutter?如何在颤动中为下拉按钮制作圆形边框？
【发布时间】：2019-04-08 13:35:25
【问题描述】：

如何添加圆角矩形边框？下面的代码没有在屏幕上产生任何边框。

Container(margin: EdgeInsets.only(top: 10.0, right: 10.0, left: 10.0),
 width: double.infinity,
 // decoration: ShapeDecoration(
 //  shape: RoundedRectangleBorder(
 //   borderRadius:BorderRadius.all(Radius.circular(5.0)),
 //                             ),

 child: DropdownButtonHideUnderline(
  child: Container(
   margin: EdgeInsets.only(
    left: 10.0, right: 10.0),
     child: new DropdownButton<UserTest>(...),
                           ),
                          ),
                   ),

【问题讨论】：

您可以尝试将您的小部件包装在ClipRRect

标签： drop-down-menu flutter spinner flutter-layout

【解决方案1】：

您需要指定side: 属性。默认为BorderSide.none。

      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          side: BorderSide(width: 1.0, style: BorderStyle.solid),
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
        ),
      ),

【讨论】：

如果我们想对打开的包含 DropDownButtonItem 的列表窗口进行四舍五入怎么办？
@aytunch 你找到你的查询的解决方案了吗？
@ChiragMittal 不幸的是：(
@aytunch 这是不可能的。您必须构建自己的DropDownButton 版本。查看小部件源代码。源中的_DropdownRoute 不可访问。
如果要删除下拉字段的下划线，只需将 DropDownButton 包裹在“DropdownButtonHideUnderline”小部件中即可。

【解决方案2】：

Container(width: 200.0,
          height: 50.0,
          decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(7.0),
          border: Border.all(color: Colors.blueGrey)),
                         child: DropdownButton<String>(
                         hint: Text("Messaging"),
                         items: <String>['Messaging', 'Chating', 'No Longer Interested', 'Document Request'].map((String value) {
                            return new DropdownMenuItem<String>(
                              value: value,
                              child: new Text(value),
                            );
                          }).toList(),
                          onChanged: (_) {},
                      ),
                      )

【讨论】：

【解决方案3】：

如果你想要的是这个

那就来吧

    import 'package:flutter/material.dart';

class RoundedBorderDropdown extends StatelessWidget {
  final List<String> _dropdownValues = [
    "One",
    "Two",
    "Three",
    "Four",
    "Five"
  ]; //The list of values we want on the dropdown

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Border Button in AppBar'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(
                color: Colors.red, style: BorderStyle.solid, width: 0.80),
          ),
          child: DropdownButton(
            items: _dropdownValues
                .map((value) => DropdownMenuItem(
                      child: Text(value),
                      value: value,
                    ))
                .toList(),
            onChanged: (String value) {},
            isExpanded: false,
            value: _dropdownValues.first,
          ),
        ),
      ),
    );
  }
}

这是礼貌inducesmile

快乐编码....

【讨论】：

还可以在DropdownButton 中添加underline: SizedBox.shrink() 以删除下划线。

【解决方案4】：

使用表单字段变体，您可以使用OutlineInputBorder InputBorder，通常用于输入文本字段：

DropdownButtonFormField(
  ...
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
  ),
),

表单字段执行此操作的方式可以复制并与常规 DropdownButton 一起使用：

InputDecorator(
  decoration: const InputDecoration(border: OutlineInputBorder()),
  child: DropdownButtonHideUnderline(
    child: DropdownButton(
      ...
    ),
  ),
),

【讨论】：

我喜欢这个答案，因为它使用了具有 labelText 属性的 DropdownButtonFormField，这将使输入标签在选择某些值后保持可见，这是从用户体验的角度来看的基础。
floatingLabelBehavior 在输入装饰器中的行为不正常。你知道为什么吗？
我不确定——也许检查一下与表单字段实现的差异？

【解决方案5】：

容器（装饰：盒子装饰（边界半径：边界半径.圆形（20.0），边框：边框.all( 颜色：HexColor('#C88A3D'), 宽度：3.0 ) ), 孩子：容器（装饰：新盒子装饰（边框半径： BorderRadius.circular(20.0), 颜色：Colors.white,), ) ),

【讨论】：

【解决方案6】：

将其包裹在 Material 中并移除 DropDown 边框

Material(
    borderRadius: BorderRadius.circular(40),
    child: SizedBox(
      width: MediaQuery.of(context).size.width / 1.08,
      child: DropdownButton(
        style: style.copyWith(color: Colors.black),
        isExpanded: true,
        underline: DropdownButtonHideUnderline(child: Container()),
        value: value,
        items: ...
   
    ),
  )

【讨论】：

【解决方案7】：

Column(
    crossAxisAlignment : CrossAxisAlignment.start,
    children: <Widget> [
        Text('Gender:'),
        InputDecorator(
            decoration: InputDecoration(
                border: OutlineInputBorder(borderRadius: const BorderRadius.all(Radius.circular(4.0)),
                contentPadding: EdgeInsets.all(10),
            ),
            child: DropdownButtonHideUnderline(
                child: DropdownButton<String>(
                    value: gender,
                    isDense: true,
                    isExpanded: true,
                    items: [
                        DropdownMenuItem(child: Text("Select Gender"), value: ""),
                        DropdownMenuItem(child: Text("Male"), value: "Male"),
                        DropdownMenuItem(child: Text("Female"), value: "Female"),
                    ],
                    onChanged: (newValue) {
                        setState(() {
                        });
                    },
                ),
            ),
        ),
    ]
),

【讨论】：