Flutter：如何從ListView的元素中保存資料？

我有一個 ListView.builder，其中包含許多 CustomCard：

ListView.builder(
   itemCount: list.length,
   itemBuilder: (context, index) {
     return CustomCard(
        data: list[index],
    }
),

CustomCard 小部件包含一個可以編輯的 TextField。當用戶從 CustomCard 小部件更改資料時，應通過按按鈕保存資料。我插入了一個螢屏截圖以便于理解：

我現在的問題是如何從 ListView / CustomCards 訪問資料。Rémi Rousselet在這里寫道“在 Flutter 中資料只能向下傳遞”。因此，我無法將所需資料添加到建構式或使用 BuildContext。Günter Z?chbauer 的這個回答說，將 GlobalKeys 用于 ListViews 的成本很高。另一個想法是將兩個小部件合并為一個，并使用Jo?o Soares建議的TextEditingController。我認為這會導致我試圖避免的非常混亂的代碼。

如何實作同時保存 ListView 的所有 CustomCard 中的資料？最簡單、最便宜、最干凈的方法是什么？有沒有我不知道或沒有正確理解的概念？

uj5u.com熱心網友回復：

我認為您希望在 ListView 小部件的每一行有兩個輸入，我希望下面的示例對您有所幫助。

解決方案^^

創建一個類，在其中宣告一個 TextEditingController 串列

class _HomePageState extends State<HomePage> {


 List<CustomCardController> _customCardControllers = [];
 List<CustomCard> _customCards = []
..add(CustomCard("US","UK"))
..add(CustomCard("TUNSIA","JAPON"))
..add(CustomCard("JAPON","CANADA"))
 ;


 @override
void initState() {
   super.initState();

    _customCardControllers = List.generate(_customCards.length, 
(index) => CustomCardControllers(_customCards[index]));
}

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("test"),
  ),
  body: Center(
    child: Column(
      children: [
        ListView.builder(
          shrinkWrap: true,
            itemCount: _customCardControllers.length,
            itemBuilder: (context, index) {
              return 
 
 
_creatCustomCard(_customCardControllers[index].customCard,index);
            }
        ),
        ElevatedButton(onPressed: getAllValues, child: 
 Text("SAVE"))
      ],
    ),
  ),
);
      }

      Widget _creatCustomCard(CustomCard customCard,int index) {
   return Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  key: UniqueKey(),
  children: [
    Row(
      children: [
        Expanded(child: Text("${customCard.arrival}"),flex: 1),
        Expanded(child: Text("
${customCard.departure}"),flex: 1),
      ],
    ),
    Row(
      children: [
        Expanded(
          flex:1,
          child: TextField(
            controller: 
 _customCardControllers[index].textEditingControllers![0],
          ),
        ),
        Expanded(
          flex:1,
          child: TextField(
            controller: 
_customCardControllers[index].textEditingControllers![1],
          ),
        ),
      ],
    ),
    SizedBox(height: 15,)
  ],
);
  }

 void getAllValues() {
  for(int i=0;i<_customCards.length;i  ){
  String value1 
 =_customCardControllers[i].textEditingControllers![0].text;
  String value2 
 =_customCardControllers[i].textEditingControllers![1].text;
  print("$i :  arrival ${_customCards[i].arrival} : $value1 | 
departure ${_customCards[i].departure} : $value2");
  }
 }
  }

class CustomCardController{
final CustomCard customCard;
  List<TextEditingController> ? textEditingControllers;

 CustomCardController(this.customCard){
  textEditingControllers = []
  ..add(new TextEditingController())
  ..add(new TextEditingController());

 }

 }

 class CustomCard{
  final String arrival;
  final String departure;

 CustomCard(this.arrival, this.departure);
 }

[![在此處輸入影像描述][1]] [1]：https ://i.stack.imgur.com/b0NTr.png

標籤：扑 列表显示

上一篇：我想創建一個ListView的單詞來自的類。我怎么能做到？

下一篇：Flutter|更新串列視圖