[英]Is there a way to add a label to a DropdownButton in flutter?
我正在嘗試獲得這種設計: 1
[標簽] : [下拉列表]
[標簽] : [文本字段]
[標簽] : [下拉列表]
我已經能夠使用以下代碼實現下拉列表:
List<String> _locations = ['Cita', 'Junta', 'Proyecto', 'Examen', 'Otro']; // Option 2
String _selectedLocation; // Option 2
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Crear Evento'),
),
body: Center(
child: Container(
width: double.infinity,
height: 400,
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.center,
child: Column(
children: <Widget>[
new Text('Categoría'),
DropdownButton(
hint: Text('Categoría'), // Not necessary for Option 1
value: _selectedLocation,
onChanged: (newValue) {
setState(() {
_selectedLocation = newValue;
});
},
items: _locations.map((location) {
return DropdownMenuItem(
child: new Text(location),
value: location,
);
}).toList(),
),
],
),
),
),
);
但是,它的輸出不是我想要的方式,因為輸出的格式為: 2
[標簽]
PS.:我知道這不是一個正確的標簽,因為它只是一個文本,如果有人能幫助我那就太好了,提前致謝。
如果我得到了你想要的東西,你將需要使用 Row( 在這里閱讀更多)來做到這一點,就像下面的例子一樣,使用你的代碼:
List<String> _locations = ['Cita', 'Junta', 'Proyecto', 'Examen', 'Otro']; // Option 2
String _selectedLocation; // Option 2
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Crear Evento'),
),
body: Center(
child: Container(
width: double.infinity,
height: 400,
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.center,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Categoría'),
Container(width: 8),
DropdownButton(
hint: Text('Categoría'), // Not necessary for Option 1
value: _selectedLocation,
onChanged: (newValue) {
setState(() {
_selectedLocation = newValue;
});
},
items: _locations.map((location) {
return DropdownMenuItem(
child: new Text(location),
value: location,
);
}).toList(),
),
],
),
],
),
),
),
);
產生這個:
我知道這不是問題的答案,但是任何想要在 FormFields 中添加 labelText 的人(之前和我一樣),您都可以使用InputDecorator 。
class ChecklistAddNewRepatDropdown extends StatelessWidget {
final Map<int, List> tasks;
final ChecklistAddNewState state;
final int index;
const ChecklistAddNewRepatDropdown({
Key key,
@required this.tasks,
@required this.index,
@required this.state,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return InputDecorator(
decoration: (state.emptyTasks.indexOf(index) == -1)
? inputDecoration('Repeat')
: inputErrorDecoration('Repeat'),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: (tasks[index] == null || tasks[index][1] == "")
? 'One'
: tasks[index][1],
isExpanded: true,
isDense: true,
style: inputTextStyle(),
icon: Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
iconSize: 24,
onChanged: (value) {
if (tasks[index] != null) {
tasks[index][1] = value;
} else {
tasks[index] = ["", value];
}
checklistAddNewBloc.add(
TasksTaskWhileChangingEvent(tasks),
);
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
);
你可以這樣使用它。 (代碼中可能有錯誤,我只是想舉例說明如何使用InputDecorator)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.