flutter - 如何从 DropDownMenu 获取所选项目的值
问题描述
我是 Flutter 的新手,我创建了我的小部件 GenreDropDown,它显示了各种类型的电影;我在 MyHomePage 中使用它,我会在小部件 Text 中显示所选项目(只是测试),但我不知道如何在 MyHomePage 屏幕中获取所选项目,我需要它,因为稍后我会添加其他小部件 TextField 和通过 FlatButton 发送所有数据(如表单)
这是我的主页
import 'package:flutter/material.dart';
import 'package:appcinema/Model/Genre.dart';
class MyHomePage extends StatefulWidget {
static const routeName = '/';
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("App Cinema"),
),
body: SafeArea(
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Select the genre of the film: ", style: TextStyle(fontSize: 17)),
GenreDropDown(),
],
),
//Text where i would show the selected value of GenreDropDown
],
),
),
)
);
}
}
这是 Genre 和 GenreDropDown 类
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Genre{
final int id;
final String name;
Genre(this.id, this.name);
}
class GenreDropDown extends StatefulWidget {
@override
GenreDropDownWidget createState() => GenreDropDownWidget();
}
class GenreDropDownWidget extends State<GenreDropDown>{
Genre ddbValue;
final List<Genre> genreList = <Genre>[
Genre(1, "Animation"),
Genre(2, "Action"),
Genre(3, "Adventure"),
Genre(4, "Biography"),
Genre(5, "Comedy"),
Genre(6, "Crime"),
Genre(7, "Documentary"),
Genre(8, "Drama"),
Genre(9, "Erotic"),
Genre(10, "Family"),
Genre(11, "Fantasy"),
Genre(12, "Horror"),
Genre(13, "History"),
Genre(14, "Musical"),
Genre(15, "Mystery"),
Genre(16, "Philosophical"),
Genre(17, "Political"),
Genre(18, "Romance"),
Genre(19, "Science Fiction"),
Genre(20, "Sci-Fi"),
Genre(21, "Social"),
Genre(22, "Thriller"),
Genre(23, "Urban"),
Genre(24, "War"),
Genre(25, "Western")
];
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
DropdownButton<Genre>(
disabledHint: Text("Disabilitated"),
hint: Text("ex: Fantasy"),
isExpanded: false,
value: ddbValue,
items: genreList.map<DropdownMenuItem<Genre>>(
(Genre item){
return DropdownMenuItem<Genre>(
value: item,
child: Text(item.name),
);
}
).toList(),
onChanged: (Genre newValue){
setState(() {
ddbValue = newValue;
});
},
),
],
);
}
}
解决方案
在您的小部件中提供一个回调,以便在选择更改时调用。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
static const routeName = '/';
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Genre ddbValue;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("App Cinema"),
),
body: SafeArea(
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Select the genre of the film: ", style: TextStyle(fontSize: 17)),
GenreDropDown(onChanged: (Genre newValue) =>
setState(() => ddbValue = newValue)
)
],
),
//Text where i would show the selected value of GenreDropDown
Text("${ddbValue!=null?ddbValue.name:""}")
],
),
),
)
);
}
}
class Genre{
final int id;
final String name;
Genre(this.id, this.name);
}
class GenreDropDown extends StatefulWidget {
final Function onChanged;
GenreDropDown({this.onChanged});
@override
GenreDropDownWidget createState() => GenreDropDownWidget();
}
class GenreDropDownWidget extends State<GenreDropDown>{
final List<Genre> genreList = <Genre>[
Genre(1, "Animation"),
Genre(2, "Action"),
Genre(3, "Adventure"),
Genre(4, "Biography"),
Genre(5, "Comedy"),
Genre(6, "Crime"),
Genre(7, "Documentary"),
Genre(8, "Drama"),
Genre(9, "Erotic"),
Genre(10, "Family"),
Genre(11, "Fantasy"),
Genre(12, "Horror"),
Genre(13, "History"),
Genre(14, "Musical"),
Genre(15, "Mystery"),
Genre(16, "Philosophical"),
Genre(17, "Political"),
Genre(18, "Romance"),
Genre(19, "Science Fiction"),
Genre(20, "Sci-Fi"),
Genre(21, "Social"),
Genre(22, "Thriller"),
Genre(23, "Urban"),
Genre(24, "War"),
Genre(25, "Western")
];
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
DropdownButton<Genre>(
disabledHint: Text("Disabilitated"),
hint: Text("ex: Fantasy"),
isExpanded: false,
items: genreList.map<DropdownMenuItem<Genre>>(
(Genre item){
return DropdownMenuItem<Genre>(
value: item,
child: Text(item.name),
);
}
).toList(),
onChanged: widget.onChanged
),
],
);
}
}
推荐阅读
- python - 将每个实例掩码合并回原始图像 Python
- node.js - 如何在构建期间创建带有转储的 postgreSQL 数据库以在 gitlab-CI 中启动单元测试?
- ios - 如何使用带有 react-native-camera 的默认 iOS 相机控件
- swift - 路径中的 SwiftUI UIImage 不可见
- scala - Doobie for Scala / Play 框架中的事务
- loops - TestCafe 循环遍历元素并检查 Set 中是否存在类
- javascript - 为什么当我更新商品数量时,循环遍历购物车商品并返回商品数量的 Vuex getter 不更新?
- python - 使用布尔数组的逐项总和作为包含的“或”
- git - GIT:获取未合并文件的哈希
- webpack - CleanWebpackPlugin 在 Webpack 5 中无法清理