使用 decorated_dropdown 按钮在Flutter App中添加具有阴影、边框、背景色、圆角、渐变背景、图标等多种装饰属性的DropdownButton。

功能

该包将帮助您为DropdownButton添加装饰。

入门

要开始使用此包，请在pubspec.yaml文件中添加以下行。

dependencies:
  decorated_dropdownbutton: ^0.0.1

在脚本中导入包

import 'package:decorated_dropdownbutton/decorated_dropdownbutton.dart';

用法

您可以像这样使用DecoratedDropdownButton()

DecoratedDropdownButton(
    value: "item1",
    items: [ 
        DropdownMenuItem(
            child: Text("Dropdown Item I"), 
            value: "item1"
        ),

        DropdownMenuItem(
            child: Text("Dropdown Item II"), 
            value: "item2"
        )
    ],
    onChanged: (value){
       print("You selected $value");
    },
)

为DecoratedDropdownButton()添加更多设计

DecoratedDropdownButton(
    value: "item1",
    items: [ 
        DropdownMenuItem(
            child: Text("Dropdown Item I"), 
            value: "item1"
        ),

        DropdownMenuItem(
            child: Text("Dropdown Item II"), 
            value: "item2"
        )
    ],
    onChanged: (value){
       print("You selected $value");
    },
    color: Colors.orange, //background color
    border: Border.all(color:Colors.redAccent, width: 2), //border 
    borderRadius: BorderRadius.circular(20), //border radius
    style: TextStyle( //text style
        color:Colors.white,
        fontSize: 20
    ),
    icon: Icon(Icons.arrow_downward), //icon
    iconEnableColor: Colors.white, //icon enable color
    dropdownColor: Colors.orange,  //dropdown background color
)

附加信息

您可以在Flutter中获取有关下拉按钮的更多信息。

访问 FlutterCampus.com 获取Flutter教程、指南和App模板

GitHub

查看 Github