Dropdownbutton

import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LearnDropdownButton(),
);
}
}

class LearnDropdownButton extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _LearnDropdownButton();
}
}

class _LearnDropdownButton extends State<LearnDropdownButton> {
List<DropdownMenuItem> getListData() {
List<DropdownMenuItem> items = List();

DropdownMenuItem dropdownMenuItem1 = DropdownMenuItem(
child: Text('1'),
value: '1',
);
items.add(dropdownMenuItem1);

DropdownMenuItem dropdownMenuItem2 = DropdownMenuItem(
child: Text('2'),
value: '2',
);
items.add(dropdownMenuItem2);

DropdownMenuItem dropdownMenuItem3 = DropdownMenuItem(
child: Text('3'),
value: '3',
);
items.add(dropdownMenuItem3);

return items;
}

var value;

/* _LearnDropdownButton(){
value=getListData()[0].value;
}*/

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Center(
child: DropdownButton(
items: getListData(),
hint: Text('请选择:'), //当没有默认值的时候可以设置的提示
value: value, //下拉菜单选择完之后显示给用户的值
onChanged: (T) {
//下拉菜单item点击之后的回调
setState(() {
value = T;
});
},
elevation: 10, //设置阴影的高度
style: TextStyle(
//设置文本框里面文字的样式
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.red),
// isDense: false,//减少按钮的高度。默认情况下,此按钮的高度与其菜单项的高度相同。如果isDense为true,则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时,非常有用
iconSize: 70.0, //设置三角标icon的大小
),
),
],
),
);
}
}

转载于:https://www.cnblogs.com/braveheart007/p/10976336.html

Flutter中的`DropDownButton`是一个小部件,用于从一个下拉列表中选择一个选项。它通常用于节省屏幕空间,同时为用户提供一个选择列表。`DropDownButton`通过弹出一个菜单来显示可选择的项,用户可以选择列表中的一个选项。当选定一个选项后,`DropDownButton`会显示所选项。 基本使用方法如下: 1. `items`:一个`DropdownMenuItem`列表,定义了下拉菜单中的所有选项。 2. `value`:当前选中项的值。 3. `hint`:可选,当没有选项被选中时显示的提示文本。 4. ` onChanged`:一个回调函数,当选项发生变化时被调用,并返回新的选项值。 示例代码: ```dart DropdownButton<String>( items: <String>['One', 'Two', 'Free', 'Four'] .map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), value: currentValue, // 当前选中的项 hint: Text('Select something'), // 提示文本 onChanged: (String newValue) { setState(() { currentValue = newValue; }); }, ); ``` `DropDownButton`提供了一些属性来定制其外观和行为,例如: - `isExpanded`:如果设置为`true`,则下拉按钮将占用尽可能多的水平空间。 - `elevation`:下拉菜单的阴影高度。 - `iconSize`:下拉按钮箭头的大小。 - `iconDisabledColor`:当按钮被禁用时,下拉箭头的颜色。 - `iconEnabledColor`:下拉箭头的默认颜色。 - `disabledHint`:当`DropDownButton`被禁用时显示的提示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值