Редактируемые текстовые поля (Удалить / Добавить) - PullRequest
Новая
       36

Редактируемые текстовые поля (Удалить / Добавить)

0 голосов
/ 23 января 2020

История Пользователь должен иметь возможность добавлять новые текстовые поля, которые будут сохранены, если он откроет приложение в другое время. Он также должен иметь возможность удалять текстовые поля из представления.

Проблема Мне удалось реализовать кнопку, которая создает текстовые поля, но я не знаю, как их "сохранить", если он снова откроет экран в другое время. Я также реализовал «кнопку удаления», но я не знаю, как удалить текстовое поле из представления.

Не обращайте внимания на ввод текстовых полей. Я сохраню это позже в SharedPreferences или в файле json. 

import 'package:flutter/material.dart';

class Test extends StatefulWidget
{
@override
_TestState createState() => _TestState();
}

class _TestState extends State<Test> with SingleTickerProviderStateMixin 
{

List<Widget> _phoneWidgets = List<Widget>();

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

@override
Widget build(BuildContext context) {
return Scaffold(
   appBar: AppBar
  (
    automaticallyImplyLeading: true,
    backgroundColor: Colors.white,
    leading: IconButton(icon:Icon(Icons.arrow_back, color: Colors.black),
      onPressed:() { Navigator.pop(context, false);}),
              actions: <Widget> 
    [
      Container
      (
        margin: EdgeInsets.only(right: 16.0),
        child: Row
        (
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget> 
          [

          ],
        ),
      )
    ],
  ),
  floatingActionButton: FloatingActionButton(
    child: Text(
      '+',
      style: TextStyle(fontSize: 20.0),
    ),
    shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10.0)),
    onPressed: () {
      setState(() {
        _phoneWidgets.add(Phone(
          fieldName: 'Phone',
        ));
      });
    },
  ),
  body: ListView(
      padding: EdgeInsets.symmetric(horizontal: 15, vertical: 8),
      children: <Widget>[ Column(
        children: List.generate(_phoneWidgets.length, (i) {
          return _phoneWidgets[i];
        }),
      )]),
);
 }
 @override
void dispose() {
super.dispose();
}
} 

class Phone extends StatelessWidget {
String fieldName;
Phone({this.fieldName = ''});

 @override
 Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(top: 8, right: 8.0),
    child: TextFormField(
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      contentPadding:
          EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
        borderSide: BorderSide(color: Colors.white, width: 0.1),
      ),
      filled: true,
      suffixIcon: IconButton(
      icon: Icon(Icons.delete),
       onPressed: () { 
                    debugPrint('222');
                  }),
      icon: Icon(
        Icons.phone,
        color: Colors.black,
        size: 20.0,
      ),
      labelText: fieldName,
      labelStyle: TextStyle(
          fontSize: 15.0,
          height: 1.5,
          color: Color.fromRGBO(61, 61, 61, 1)),
      fillColor: Color(0xffD2E8E6),
    ),
    maxLines: 1,
  ),
);
}
}

1 Ответ

0 голосов
/ 23 января 2020

Следующее должно помочь вам: сохранить список значений текстовых полей (строк) в состоянии и построить представление списка, заполненное текстовыми полями из этого списка строк.

Обработка удаления : Когда вы нажимаете «удалить» для текстового поля с указанным c индексом в списке, удалите строку из списка в состоянии с тем же индексом. Затем позвоните setState(). Это переопределяет представление списка. Затем обновите запись общих настроек с помощью этого списка строк.

Добавление обработки: Когда вы нажимаете «добавить». Добавьте пустую запись в список строк и снова установите состояние. Затем обновите запись общих настроек.

Повторная загрузка списка при запуске: При следующем запуске приложения загрузите список строк из общих настроек и установите его в свой список Переменная отслеживается в состоянии. Затем снова создайте представление списка из этого же списка строк.

...