根據下拉選單中選擇的專案,我應該讓它在按下浮動按鈕后出現不同的文本。那么,如何將浮動按鈕連接到下拉選單中的專案?
現在,當我按下時,什么也沒有發生。
我嘗試將 if 陳述句放入 setState 中,然后根據下拉選單值設定 showText。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DropDownButton and FloatingActionButton',
theme: ThemeData(
primarySwatch: Colors.green,
floatingActionButtonTheme: const FloatingActionButtonThemeData(
splashColor: Colors.tealAccent,
hoverColor: Colors.redAccent,
),
),
home: const MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int showText = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Geeksforgeeks"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const DropdownButtonExample(),
image(),
]
)
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
onPressed: () {
if(_DropdownButtonExampleState().dropdownvalue == "Item 3"){
setState((){
showText = 1;
});
}else if (_DropdownButtonExampleState().dropdownvalue == "Item 2") {
setState((){
showText = 2;
});
}else{
setState((){
showText = 3;
});
}
}
),
);
}
image(){
if (showText == 1){
return const Text("Yo");
} else if (showText == 2){
return const Text("Hi");
} else{
return const Text("Hello");
}
}
}
class DropdownButtonApp extends StatelessWidget {
const DropdownButtonApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Center(
child: DropdownButtonExample(),
);
}
}
class DropdownButtonExample extends StatefulWidget {
const DropdownButtonExample({Key? key}) : super(key: key);
@override
State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String dropdownvalue = 'Item 1';
var items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
];
@override
Widget build(BuildContext context) {
return DropdownButton(
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
);
}
}
uj5u.com熱心網友回復:
首先,將您的DropdownButton
小部件與您的MyHomePage
小部件結合起來,然后使用dropdownvalue
而不是_DropdownButtonExampleState().dropdownvalue
這樣:
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int showText = 1;
//add states here:
String dropdownvalue = 'Item 1';
var items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Geeksforgeeks"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
DropdownButton(
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),
image(),
]
)
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
onPressed: () {
if (dropdownvalue == "Item 3") {
setState(() {
showText = 1;
});
} else if (dropdownvalue == "Item 2") {
setState(() {
showText = 2;
});
} else {
setState(() {
showText = 3;
});
}
}
),
);
}
image() {
if (showText == 1) {
return const Text("Yo");
} else if (showText == 2) {
return const Text("Hi");
} else {
return const Text("Hello");
}
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/521244.html