问使用复选框自定义下拉式颤动
EN

Stack Overflow用户

提问于 2021-08-11 21:03:40

回答 2查看 328关注 0票数 0

我是个新手。它是自定义的下拉列表，所有边框都有圆角。以及带有复选框的下拉菜单与其一起列出。

我尝试了几个渲染对象的例子。但是我不知道如何得到这个设计。

有人能帮我做这个设计吗？

示例

class _DropdowncustomState extends State<Dropdowncustom> {
  late String valueChoose;
  List listitem = [
    "Item 1","Item 1","Item 1","Item 1","Item 1"
  ];
  List _gender = [ 'Male','Female','Other'];
  String  ? _genderval;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.only(left:10,right:10),

          decoration: BoxDecoration(
            border: Border.all(color:Colors.transparent),
            borderRadius: BorderRadius.all(Radius.circular(30)),
            color: Colors.white,
          ),
          child: DropdownButton(
            hint: Text('Gender'),
            dropdownColor: Colors.white,



            // dropdownColor: Colors.grey[200],
            value: _genderval,
             isExpanded: true,
            onChanged: (value)
            {
              setState(() {
                _genderval= value as String?;
              });
            },
            items: _gender.map((value)
            {
              return DropdownMenuItem(
                value: value,
                child: Text(value) ,);
            }



            ).toList(),

          ),

        ),


      ),
    );
  }
}

dropdown

checkboxlist

flutter

user-interface

checkbox

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-08-11 21:36:17

点击链接Flutter Dropdown。

如果您不想搜索，只需设置-> showSearchBox: false，

第二件事是你必须用flutter复选框替换图标。

在DropDownSearch()中使用这两个特性

 dropdownBuilder: _customDropDownExample,
 popupItemBuilder: _customPopupItemBuilderExample,

这些是-

Widget _customDropDownExample(
  BuildContext context, UserModel? item, String itemDesignation) {
if (item == null) {
  return Container();
}

return Container(
  child: (item.avatar == null)
      ? ListTile(
          contentPadding: EdgeInsets.all(0),
          leading: CircleAvatar(),
          title: Text("No item selected"),
        )
      : ListTile(
          contentPadding: EdgeInsets.all(0),
          leading: CircleAvatar(
              // this does not work - throws 404 error
              // backgroundImage: NetworkImage(item.avatar ?? ''),
              ),
          title: Text(item.name),
          subtitle: Text(
            item.createdAt.toString(),
          ),
        ),
);

}

第二个是-

Widget _customPopupItemBuilderExample(
  BuildContext context, UserModel item, bool isSelected) {
return Container(
  margin: EdgeInsets.symmetric(horizontal: 8),
  decoration: !isSelected
      ? null
      : BoxDecoration(
          border: Border.all(color: Theme.of(context).primaryColor),
          borderRadius: BorderRadius.circular(5),
          color: Colors.white,
        ),
  child: ListTile(
    selected: isSelected,
    title: Text(item.name),
    subtitle: Text(item.createdAt.toString()),
    leading: CircleAvatar(
        // this does not work - throws 404 error
        // backgroundImage: NetworkImage(item.avatar ?? ''),
        ),
  ),
);

}

票数 0

Stack Overflow用户

发布于 2021-08-11 21:53:22

为了实现这一点，你可以将你的下拉菜单包装在一个卡片小部件中，并且为了使方框变成圆角，你可以像这样设置卡片的形状值：

Card (child: ... , 
shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
              topLeft: Radius.circular(//whatever value you want), 
              topRight: Radius.circular(),
...
            ));