[英]How can i show a column or container inside DropDownButton? flutter
我想在 flutter 中使用DropDownButton
部署一些信息。
我只想在屏幕的垂直列中顯示 3 個不同的DropDownButton
。 在每個DropDownButton
內部,我想顯示一個包含 2 個單元格的水平 Column。
左側顯示 QR 圖像,右側顯示有關該 QR 的信息,例如該項目的描述。
我怎樣才能做類似於那個想法的事情?
這是我的代碼:
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[850],
appBar: AppBar(
title: Text(
"This all the QR",
style: TextStyle(
fontSize: 16.0, /*fontWeight: FontWeight.bold*/
),
),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.symmetric(
horizontal: 8,
),
child: Column(
children: [
//here i want to show 3 DropdownButtons, and deploy the info inside it.
child: DropdownButton(),
child: DropdownButton(),
child: DropdownButton(),
]
我想實現這樣的目標
試試這個並根據需要更改此代碼
class MyApp2 extends StatefulWidget {
const MyApp2({Key? key}) : super(key: key);
@override
State<MyApp2> createState() => _MyApp2State();
}
class _MyApp2State extends State<MyApp2> {
List<CustomDropDownItem> items =
List.generate(10, (index) => CustomDropDownItem("item $index", "item $index", "item $index"));
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: Column(children: [
const Text("Custom DropDown"),
CustomDropDown(
items: items,
height: 300,
onChanged: (selectedItem, selectedIndex) {
print(selectedItem.value);
},
),
...List.generate(
20,
(index) => Card(
child: ListTile(
title: Text("Custom Widget $index"),
),
))
]),
)));
}
}
class CustomDropDownItem {
String text;
String value;
// change it as you want, string or image path or QR or widget
String info;
CustomDropDownItem(this.text, this.value, this.info);
}
class CustomDropDown extends StatefulWidget {
final List<CustomDropDownItem> items;
final Function(CustomDropDownItem selectedItem, int selectedIndex) onChanged;
final double height;
const CustomDropDown({Key? key, required this.items, required this.onChanged, this.height = 300}) : super(key: key);
@override
_CustomDropDownState createState() => _CustomDropDownState();
}
class _CustomDropDownState extends State<CustomDropDown> {
final _controller = TextEditingController();
bool _showItems = false;
CustomDropDownItem? _selectedItems;
@override
Widget build(BuildContext context) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: _controller,
readOnly: true,
onTap: () {
setState(() {
_showItems = !_showItems;
});
},
decoration: InputDecoration(
border: const OutlineInputBorder(),
suffixIcon: _showItems ? const Icon(Icons.arrow_upward) : const Icon(Icons.arrow_downward)),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
elevation: 20,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(25)),
height: _showItems ? widget.height : 0,
child: Opacity(
opacity: _showItems ? 1 : 0,
child: Row(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
children: List.generate(
widget.items.length,
(index) => Card(
child: ListTile(
trailing: GestureDetector(
onTap: () {
setState(() {
_selectedItems = widget.items[index];
});
},
child: const Icon(Icons.details),
),
title: Text(widget.items[index].text),
onTap: () {
_controller.text = widget.items[index].value;
widget.onChanged(widget.items[index], index);
setState(() {
_showItems = false;
});
},
),
)),
),
)),
Container(
color: Colors.grey,
width: 5,
height: double.infinity,
),
Expanded(
child: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
// change it as you want
child: Text(_selectedItems?.info ?? widget.items.first.info),
)),
],
),
),
),
),
),
],
);
}
}
您正在尋找的行為屬於擴展磁貼。 下拉菜單具有不同的功能。 請檢查此鏈接
https://api.flutter.dev/flutter/material/ExpansionTile-class.html
ExpansionTile(
title: Text(title),
children: [
Container (),
Container(),
....
]// Add all items you wish to show when the tile is expanded
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.