如何使用 Flutter 创建联系人列表？

Question

我正在创建动态联系人列表。
当我在添加联系人文本字段中输入号码时。将自动打开另一个文本字段。当我擦除文本字段时，下面的空白将自动删除。
我尝试了几种方法，但 id 没有用。
在我的代码中，我在更改方法上使用了文本字段，当我输入号码时，它会打开我添加的每个号码的新联系人字段，我只想要一个联系人字段。

import 'package:flutter/material.dart';

class Contactadd extends StatefulWidget {
  const Contactadd({Key? key}) : super(key: key);

  @override
  _ContactaddState createState() => _ContactaddState();
}

class _ContactaddState extends State<Contactadd> {
  String dropdownValue = "Mobile";
  List<Widget> cardList = [];
  Widget card1() {
    return Container(
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: const Color(0xFFE8DBDB),
          borderRadius: BorderRadius.circular(20)),
      child: Row(
        children: [
          const SizedBox(
            width: 10,
          ),
          dropdown(),
          Container(
            height: 40,
            width: 200,
            margin: const EdgeInsets.all(5),
            child: TextField(
              keyboardType: TextInputType.number,
              // controller: dropdownController,
              decoration: const InputDecoration(
                  contentPadding: EdgeInsets.only(left: 10),
                  border: InputBorder.none),
              onChanged: (_) {
                String dataa = _.toString();
                if (dataa.length == 1) {
                  print(_ + "=================");
                  cardList.add(_card());
                  setState(() {});
                } else if (dataa.length < 1) {
                  cardList.removeLast();
                }
              },
              // addCardWidget,
            ),
          ),
        ],
      ),
    );
  }

  Widget _card() {
    return Container(
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: const Color(0xFFDE6868),
          borderRadius: BorderRadius.circular(20)),
      child: Row(
        children: [
          const SizedBox(
            width: 10,
          ),
          dropdown(),
          Container(
              height: 40,
              width: 200,
              margin: const EdgeInsets.all(5),
              child: TextFormField(
                  keyboardType: TextInputType.number,
                  decoration: const InputDecoration(
                      contentPadding: EdgeInsets.only(left: 10),
                      border: InputBorder.none),
                  onChanged: (_) {
                    String dataa = _.toString();
                    if (dataa.isEmpty) {
                      print("true");
                    } else {
                      print("false");
                    }
                    if (dataa.length == 1 || dataa.length == 0) {
                      print(_ + "=================");
                      cardList.add(_card());
                      setState(() {});
                    } else {
                      cardList.removeLast();
                    }
                  })),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Contact List"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              card1(),
              Container(
                height: 430,
                width: MediaQuery.of(context).size.width,
                child: ListView.builder(
                    itemCount: cardList.length,
                    itemBuilder: (context, index) {
                      return _card();
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }

  
}

Answer 1

这将帮助您创建符合您要求的视图的完整代码

import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Contactadd(),
        );
      }
    }
    
    class Contactadd extends StatefulWidget {
      @override
      _ContactaddState createState() => _ContactaddState();
    }
    
    class _ContactaddState extends State<Contactadd> {
      Map<int, dynamic> contactMap = new Map();
    
      @override
      void initState() {
        contactMap.addAll(
          {0: 1},
        );
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            appBar: AppBar(
              title: Text("Contact List"),
            ),
            body: Column(
              children: [
                for (var i = 0; i < contactMap.length; i++) ...[
                  Container(
                    margin: EdgeInsets.all(10),
                    child: TextField(
                      onChanged: (value) {
                        if (value.toString().isEmpty) {
                          contactMap.removeWhere((key, value) => key == i + 1);
                        } else {
                          contactMap.addAll(
                            {i + 1: 1},
                          );
                        }
                        setState(() {});
                      },
                      keyboardType: TextInputType.number,
                      autocorrect: true,
                      decoration: InputDecoration(
                        hintStyle: TextStyle(color: Colors.grey),
                        filled: true,
                        contentPadding: EdgeInsets.only(bottom: 0.0, left: 8.0),
                        fillColor: Colors.white70,
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(4.0)),
                          borderSide:
                              BorderSide(color: Colors.lightBlueAccent, width: 1),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(4.0)),
                          borderSide: BorderSide(color: Colors.lightBlueAccent),
                        ),
                      ),
                    ),
                  ),
                ],
              ],
            ),
          ),
        );
      }
    }

如何使用 Flutter 创建联系人列表？

How to create contact list using Flutter?

flutter

flutter-test

flutter-dependencies

flutter-layout

flutter-web