我正在開發一個應用程式，該應用程式的表單使用 ListViewBuilder 作為專案串列并回傳一個小部件，該小部件顯示串列中每個專案的 TextField。有沒有辦法從表單小部件本身訪問任何專案的 TextField 控制器以獲取新值？
ListView 構建器中使用的小部件
class BrandNamesWidget extends StatelessWidget {
BrandNamesWidget({Key? key, required this.brandName, required this.index})
: super(key: key);
final String brandName;
final int index;
final TextEditingController _brandNameController =
new TextEditingController();
@override
Widget build(BuildContext context) {
_brandNameController.text = brandName;
final deviceDimensions = Provider.of<Dimension>(context);
double height = deviceDimensions.getDeviceHeight();
double width = deviceDimensions.getDeviceWidth();
return TextField(
controller: _brandNameController,
cursorColor: Colors.black,
style: TextStyle(
color: AppInfo.MAIN_COLOR,
letterSpacing: 1.5,
),
keyboardType: TextInputType.text,
decoration: InputDecoration(
constraints: BoxConstraints(maxWidth: width * 0.45),
labelText: 'Brand name: ' index.toString(),
prefixIcon: Icon(Icons.medication),
labelStyle: TextStyle(
fontSize: height * 0.03,
color: AppInfo.MAIN_COLOR,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
),
),
);
}
}
表單小部件
.
.
Container(
child: ListView.builder(
itemCount: _brandnames.length,
itemBuilder: (BuildContext ctx, int index) {
return BrandNamesWidget(
brandName: _brandnames[index].toString(),
index: index);
}),
),
// Want to access the _brandNameController.text here in a function to update firestore
.
.
我已經在線檢查了解決方案，我發現的唯一類似問題來自這個 stackoverflow 問題（Is there a way to access variables in a state in Flutter/Dart?）
uj5u.com熱心網友回復：
一種方法是在 itemBuilder 中從外部實體化 TextEditingController 并將其注入 BrandNamesWidget 中，將它們的參考保存在集合中，這樣您就可以像我為您創建的Gist一樣從外部獲取它們的內容。這就是您的新課程的樣子：
class BrandNamesWidget extends StatelessWidget {
final TextEditingController? controller;
final String? brandName;
final int? index;
BrandNamesWidget({ this.brandName, required this.index, this.controller });
@override
Widget build(BuildContext context) {
double height = 100;
double width = MediaQuery.of(context).size.width;
return TextField(
controller: controller!,
keyboardType: TextInputType.text,
decoration: InputDecoration(
constraints: BoxConstraints(maxWidth: width * 0.45),
labelText: 'Brand name: ' index.toString(),
prefixIcon: const Icon(Icons.medication),
labelStyle: TextStyle(
fontSize: height * 0.03,
color: Colors.grey,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
),
),
);
}
}
這是持有TextEditingController參考的父小部件，包含您的ListView.builder：
class MyWidget extends StatelessWidget {
List<String> _brandnames = ['Toyota', 'Honda', 'BMW', 'Mercedes'];
List<TextEditingController> controllers = [];
@override
Widget build(BuildContext context) {
controllers = [];
return Column(
children: [
Expanded(
child: Container(
child: ListView.builder(
itemCount: _brandnames.length,
itemBuilder: (BuildContext ctx, int index) {
TextEditingController ctrl = TextEditingController();
controllers.add(ctrl);
return BrandNamesWidget(
brandName: _brandnames[index].toString(),
controller: ctrl,
index: index);
}),
)
),
TextButton(
onPressed: () {
for(var ctrl in controllers) {
print(ctrl.text);
}
},
child: Text('Click me to get their values')
)
]
);
}
}
If you input stuff on the text fields shown, and you click on the button I provided, you'll get their content from a function, thus being able to update Firestore or anything you want. Check it out and let me know.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436543.html