Как мне настроить DropdownButtons и DropdownMenuItems во Flutter?
Автор вопроса: MaryОтветов: 8
По умолчанию DropdownButton с DropdownMenuItems возвращает светло-серый раскрывающийся список. Как мне настроить раскрывающийся список (например, цвет фона, ширину раскрывающегося списка)? Я могу изменить свойство style как в DropdownButton, так и в DropdownMenuItem, например:
return new DropdownButton(
value: ...,
items: ...,
onChanged: ...,
style: new TextStyle(
color: Colors.white,
),
);
но это не меняет цвет фона раскрывающегося списка.
Следует ли мне скопировать DropdownMenu и расширить его? Планирует ли Flutter добавить настройку для этого виджета в ближайшем будущем?
Как сказал Коллин, ваш DropdownMenuItem будет следить за вашим классом ThemeData. Не только его backgroundColor будет соответствовать canvasColor в вашем ThemeData классе, но также он будет следовать тому же TextStyle.
Итак, для быстрого примера:
new ThemeData(
fontFamily: "Encode Sans", //my custom font
canvasColor: _turquoise, //my custom color
//other theme data)
Кроме того, если вы хотите управлять width меню, вы можете скормить его свойству child новый Container и добавить желаемый width, проверить следующий GIF, я начал с width: 100.0, затем перезагрузил его после изменения на 200.0, обратите внимание, как width был изменен, просто убедитесь, что вы используете подходящую ширину, чтобы у вас не возникло проблем с переполнением позже, когда вы будете использовать меню в более сложном макете.
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title:new Text ("Test"),
),
body: new Center(
child: new DropdownButton(items: new List.generate(20, (int index){
return new DropdownMenuItem(child: new Container(
child: new Text ("Item#$index"),
width: 200.0, //200.0 to 100.0
));
})
, onChanged: null)
),
);
}
}
Ответ 2 · рейтинг 67 · Collin Jackson
Этого можно добиться, заключив DropdownButton в _ 2_ и переопределение виджета _ 3_.
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
State createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
int _value = 42;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.blue.shade200,
),
child: new DropdownButton(
value: _value,
items: <DropdownMenuItem<int>>[
new DropdownMenuItem(
child: new Text('Foo'),
value: 0,
),
new DropdownMenuItem(
child: new Text('Bar'),
value: 42,
),
],
onChanged: (int value) {
setState(() {
_value = value;
});
},
),
),
),
);
}
}
Ответ 3 · рейтинг 38 · FloatingRock
Мне удалось изменить фон для раскрывающегося списка, заключив его в Container с набором свойств color.
Если вы хотите, чтобы DropdownButton заполнял пространство, в котором он находится, используйте свойство isExpanded и установите для него значение true.
DropdownButton<String>(
isExpanded: true,
)
Ответ 5 · рейтинг 10 · Adhokshaja Madhwaraj
В последней версии Flutter можно сделать что-то очень простое.
Класс DropdownButton имеет встроенную переменную dropdownColor, которой можно напрямую присвоить любой цвет, без изменения каких-либо ThemeData. Также автоматически меняет цвет элементов раскрывающегося меню.
