在我的 Flutter 應用程式中，我想重用一個接收用戶輸入的自定義對話框。如果我showDialog()在類中執行操作并在另一個類中使用自定義 AlertDialog，則一切正常。但是，這迫使我每次都重新鍵入按鈕的 onpressed 和 showdialog 部分。我更希望在另一個可重用的類中也有它，并將用戶輸入傳遞給它（并獲得具有所有功能的按鈕作為回報）。這樣做的問題是加載頁面時不存在用戶輸入，因此我需要知道按下按鈕時的更新狀態。我被卡住了......猜測它應該是傳遞小部件狀態的東西，但在這里迷路了。
我創建了一個最小的應用程式來重現問題，這里是代碼：
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 const MaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
var myTextFieldController = TextEditingController();
return Scaffold(
appBar: AppBar(title: const Text('Dialog test')),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
TextField(controller: myTextFieldController),
TestButton().getButton(context, myTextFieldController.text),
],
),
);
}
}
class TestButton {
Widget getButton(BuildContext context, myText) {
return ElevatedButton(
child: const Text('Show Dialog'),
onPressed: () {
showDialog(
context: context,
builder: (builder) {
return AlertDialog(
title: Text(myText), // is always empty
);
});
},
);
}
}
盡管 TextField 中有文本，但 AlertDialog 的文本仍然為空。我怎樣才能讓它作業？謝謝！
uj5u.com熱心網友回復：
您可以按照以下步驟操作：
- 創建一個新
String變數以將值存盤在TextField. - 更新
StringonChanged 屬性中的值TextField并呼叫 setState。 - 將創建的新變數傳遞給
getButton而不是myTextFieldController.text
代碼：
class _HomeScreenState extends State<HomeScreen> {
var myTextFieldController = TextEditingController();
String textValue = "";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Dialog test')),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
TextField(
controller: myTextFieldController,
onChanged: (v){
textValue = v;
setState((){});
}
),
TestButton().getButton(context, textValue),
],
),
);
}
為什么我使用 myTextFieldController.text 時傳遞的值總是空的？
這是因為第一個值為myTextFieldController.text“”（空）的值是傳遞給的值，并且在值更改時getButton不會更新。getButtonTextField
uj5u.com熱心網友回復：
像這樣呼叫你的getbutton方法......
TestButton().getButton(context, myTextFieldController.value.text);
它作業......訪問你的文本欄位控制器的值屬性將解決這個問題。
uj5u.com熱心網友回復：
這是因為最初當你呼叫TestButton().getButton一個新的小部件時，myTextFieldController.text它的初始值為空。現在，當您插入文本myTextFieldController.text更改的值時，會更進一步，但顫振仍在使用最初構建的小部件，因此對話框文本不會得到更新。強制重建的方法是使用setStatewhen myTextFieldController.textchanges。但最好將小部件和對話框彼此分離。現在負責顯示對話框的小部件是一個簡單的ElevatedButton. 如果它有一個相當復雜的 ui 需要在其他地方使用，最好實作一個新的小部件，而不是有一個在其方法中回傳小部件的類。如果您從showDialog那里分離小部件，則無需呼叫setState了。以下代碼有兩個按鈕來展示差異。第二個只是作業，第一個雖然你必須取消注釋onChangedof TextField：
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
var myTextFieldController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Dialog test')),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
TextField(
controller: myTextFieldController,
/// Uncomment the following 3 lines for the first button to work
// onChanged: (val) {
// // setState(() {});
// },
///
),
TestButton().getButton(context, myTextFieldController.text),
ElevatedButton(
onPressed: () => TestButton.showTestDialogue(context, myTextFieldController.text),
child: const Text('Show Test Dialog'),
),
],
),
);
}
}
class TestButton {
Widget getButton(BuildContext context, myText) {
return ElevatedButton(
child: const Text('Show Dialog'),
onPressed: () {
showDialog(
context: context,
builder: (builder) {
return AlertDialog(
title: Text(myText), // is always empty
);
},
);
},
);
}
static Future showTestDialogue(BuildContext context, myText) {
return showDialog(
context: context,
builder: (builder) {
return AlertDialog(
title: Text(myText),
);
},
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/411613.html
標籤：
上一篇：如何在其他地方使用變數