如何使用Listview構建器在動態卡片中設定TextFormFields和控制器

我試圖在按下按鈕時用文本框建立每張卡片，直到它達到一些限制，比如只有10張卡片，所以當我按下浮動按鈕時，卡片在增加，但文本框中的文字每按一下都會被擦掉。誰能幫我建立動態的卡片和文本框，而不是每按一次就擦掉？下面我附上應用程式的截圖。

 import 'package:flutter/material.dart'/span>。

void main() {
  runApp(App())。
}

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      首頁。CardWithTextformfield(),
    );
  }
}

class CardWithTextformfield extends StatefulWidget{
  const CardWithTextformfield({Key? key}) : super(key: key)。

  @override
  _CardWithTextformfieldState createState() => _CardWithTextformfieldState()。
}

class _CardWithTextformfieldState extends State< CardWithTextformfield> {

  var name =<TextEditingController>[] 。
  var id =<TextEditingController>[] 。

  var addCard =0;

  void incrementcard(){
    setState(() {
      if（addCard >=7）{
        return。
      }
      addCard  ;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        標題。Text('Card with TextformField'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementcard,
        孩子。Icon(Icons.add),
      ),
      body: 容器(
        child:ListView.builder()
          itemCount: addCard,
            itemBuilder: (context,index){
            return cardslist（）。
            }
        ),
      ),
    );
  }
  小工具cardlist(){
    var nameController = TextEditingController();
    var idController = TextEditingController();
    name.add(nameController);
    id.add(idController)。
    return Card(
      margin: EdgeInsets.all(10)。
      孩子。容器(
        child: 列(
          children: [
            行(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                容器(
                    margin: EdgeInsets.all(10)。
                    孩子。Text('Name: '))。
                Expanded(child: TextFormField(
                  controller: nameController,
                    裝飾。InputDecoration(hintText: 'Name')。
                ),),
                容器(
                  margin: EdgeInsets.all(10)。
                  孩子。Text('EmpId: '/span>),)。
                Expanded(child: TextFormField(
                  controller: idController,
                    裝飾。InputDecoration(hintText: 'EmpId')。
                ),),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

你的方法的問題是，當一個新的卡片被插入時，你重新創建了每個控制器，這就是為什么輸入的值會丟失。相反，你應該檢查當前卡片的控制器是否已經存在于你的陣列中，如果是，就使用現有的控制器，否則就創建一個新的控制器。

要做到這一點，你必須將index作為引數添加到你的cardsList方法中。下面的代碼我想可以解決你的問題。

重要的是：控制器應該在這個widget被銷毀時被銷毀，請添加這部分。你應該在你的_CardWithTextformfieldState中覆寫dispose方法，回圈瀏覽兩個陣列中所有的控制器，并在每個控制器上呼叫dispose()。在最后不要忘記呼叫super.dispose()。

import 'package:flutter/material.dart'。

void main() {
  runApp(App())。
}

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      首頁。CardWithTextformfield(),
    );
  }
}

class CardWithTextformfield extends StatefulWidget{
  const CardWithTextformfield({Key? key}) : super(key: key)。

  @override
  _CardWithTextformfieldState createState() => _CardWithTextformfieldState()。
}

class _CardWithTextformfieldState extends State< CardWithTextformfield> {
  final _name = <TextEditingController>[] 。
  final _id = <TextEditingController>[];
  int _addCard = 0;

  void _incrementcard() {
    setState(() {
      if (_addCard >= 7) {
        return;
      }
      _addCard  ;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        標題。Text('Card with TextformField'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementcard,
        孩子。Icon(Icons.add)。
      ),
      body: 容器(
        孩子。ListView.builder(
            itemCount: _addCard,
            itemBuilder: (context, index) {
              return cardslist(index);
            }),
      ),
    );
  }

  小工具cardlist(int index) {
    if (_name.length <= index) {
      _name.add(TextEditingController())。
      _id.add(TextEditingController())。
    }

    return Card(
      margin: EdgeInsets.all(10)。
      孩子。容器(
        child: 列(
          children: [
            行(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(margin: EdgeInsets.all(10), child: Text('Name: '))。
                展開(
                  孩子。TextFormField(
                    控制器。_name[index],
                    裝飾。InputDecoration(hintText: 'Name')。
                  ),
                ),
                容器(
                  margin: EdgeInsets.all(10)。
                  孩子。Text('EmpId: '/span>),
                ),
                展開(
                  孩子。TextFormField(
                    控制器。_id[index],
                    裝飾。InputDecoration(hintText: 'EmpId') 。
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

標籤：

上一篇：如何在Flutter中制作一個有兩行的水平ListView？

下一篇：在xamarin表單中，子串列沒有系結到ListView分組上