Блог

Главная - Вопросы по программированию - Добавление ввода текстового поля (формы) в список

Добавление ввода текстового поля (формы) в список

#list #flutter #textfield

#Список #flutter #текстовое поле

Вопрос:

Есть вопрос к моему приложению Flutter:

У меня есть список:

 List<Item> tags = <Item>[
   Item(
     "name",
     Colors.red,
   ),
   Item(
     "Cooking",
     Colors.red,
   ),
   Item(
     "Sport",
     Colors.red,
   ),
 ];

и текстовое поле формы

    TextFormField(
     controller: tagController

как мне добавить текст, который я ввел в поле формы, в список?
Они находятся в разных StatefulWidgets.

Комментарии:

1. что вы имеете в виду, говоря «Они находятся в разных StatefulWidgets». ?

2. Вы можете добиться этого с помощью provider . Работаю над этим, скоро поделюсь, иншаАллах 🙂

3. Я обновил свой ответ, просмотрев пункты 2 и 4. Использование consumer — лучший вариант, поскольку он предотвращает перестройку всего виджета с отслеживанием состояния, следовательно, повышает производительность.

Ответ №1:

Provider — отличное решение для управления состоянием для flutter, и я решил вашу проблему с помощью provider. Внимательно выполните следующие действия, чтобы убедиться, что вы правильно его реализовали.

  1. Начните с добавления Provider в pubspec.yaml 
     provider: ^4.3.3
  2. Создайте класс уведомителя, который расширяет ChangeNotifier 
     class ItemListNotifier extends ChangeNotifier{

    List<Item> tags = <Item>[
                  Item(
                      "name",
                      Colors.red,
                     ),
                  Item(
                      "Cooking",
                      Colors.red,
                     ),
                  Item(
                     "Sport",
                     Colors.red,
                      ),
                   ];

    void add(Item item){

    tags.add(item);
    notifyListeners(); //Rebuilds the Stateful widget on updating list
  }
}
  3. Оберните вас MaterialApp внутри ChangeNotifierProvider 
     class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

  return ChangeNotifierProvider<ItemListNotifier>(

            create: (context) => ItemListNotifier(),
            child: MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                      primarySwatch: Colors.blue,
                      visualDensity: VisualDensity.adaptivePlatformDensity,
                  ),
            home: ScreenWithList(),
        )
     );
   }
}
  4. Внутри вас statefulWidget с помощью list named tags доступ к значению уведомителя с помощью a Consumer , который перестраивается каждый раз, когда список обновляется, и предотвращает перестройку всего экрана. 
     class ScreenWithList extends StatefulWidget {
    @override
    _ScreenWithListState createState() => _ScreenWithListState();
 }

class _ScreenWithListState extends State<ScreenWithList> {

List<Item> tags = <Item>[
 Item(
    "name",
    Colors.red,
  ),
  Item(
    "Cooking",
    Colors.red,
  ),
  Item(
    "Sport",
    Colors.red,
  ),
];

 @override
 Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(),
  body: Center(child: Consumer<ItemListNotifier>(
builder: (context, list, child) {

  print('Rebuilt');
  return ListView.builder(

      itemCount: list?.tags?.length ?? 0,
      itemBuilder: (context, index) {
    return Text(list?.tags[index]?.name ?? '');
                    }
               );
           },
        )
    ),
   floatingActionButton: FloatingActionButton(
  child: Icon(
      Icons.arrow_forward,
    ),
  onPressed: () => Navigator.push(context, MaterialPageRoute(builder: 
   (context) => ScreenWithFormField()))
      ),
   );
 }
}
  5. Теперь обновите свой список с statefulWidget помощью Provider add функции доступа ItemListNotifier к . 
     FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () => Provider.of<ItemListNotifier>(context, listen: false).add(Item(tagController.text.trim(), Colors.red)),
  ),

Что здесь происходит?

Каждый раз, когда вы обновляете список с помощью ItemListNotifier's add метода, он перестраивает Consumer<ItemListNotifier .

Метки: