单击当前列表时如何添加新列表

Question

我想做的是当我点击图标添加时，它会生成一个我声明的数组列表。该列表有自己的容器，其中有不同的 header 'Surat Rasmi permohonan, surat lantikan peguam'。我目前的问题是 3 个列表同时出现，调用我的 'header' 的方法错误。这是我的编码。请参考。

希望有人能在这方面开导和帮助我。我正在为我的 UploadDoc 功能使用有状态的小部件。

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

  @override
  State<UploadDoc> createState() =>  _UploadDocState();
}

class _UploadDocState extends State<UploadDoc> {

  final List<dynamic> listSelection = [
    { 
      'id': 0, 
      'header':'Surat Rasmi Permohonan', 
      'title': 'Muat Naik Surat Rasmi',
    },
     { 
      'id': 1, 
      'header':'Surat Lantikan Peguam',  
      'title': 'Muat Naik Surat Rasmi',
    },
     { 
      'id': 2, 
      'header':'Surat hubungan peguam dan pemilik daftar', 
      'title': 'Muat Naik Surat Rasmi',
    },
  ];
  
  dynamic _selected = 0;
  int index = 0;
  //int _count =0;
  //late List<Widget> _upload = new List.generate(_count, (int i) =>  UploadDoc());

void add() { 
  setState(() {
    listSelection.insert(0, 0);
  });
}
  @override
  Widget build(BuildContext context) {
    return Column(
        children:  [
          SizedBox(
            height: 200.0, 
            width: 400.0,
            child: ListView.builder(
              itemCount: listSelection.length, 
              itemBuilder: (BuildContext context, int index) {   
                return Column(
                  children: [
                    Container(
                      width: double.infinity,
                      height: 30,
                      color: Colors.grey,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          const SizedBox(width: 10),
                          Text(listSelection[index]['header'], style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
                        ],
                      )
                    ),
                    ListTile( 
                      title: Text(listSelection[index]['title']),
                      leading: IconButton(
                      icon: Icon(Icons.add_circle_outline), 
                      onPressed: add,
              ),
                )] ,
                );
              },
            ),
          ), 
          const Divider(thickness: 1)
        ],
    );
  }
}

Answer 1

不要在 build 方法中声明任何内容。这些变量将在状态更改时重新初始化。更好的方法是使用 ListView.builder. while you like to have separator, use ListView.separated.

下一个重要的事情是控制计数增量的索引范围，


class _UploadDocState extends State<UploadDoc> {
  final List<dynamic> listSelection = [
    {
      'id': 0,
      'header': 'Muat Naik Surat Rasmi Permohonan',
      'icon': Icon(Icons.add_circle_outlined),
      'title': 'Muat Naik Surat Rasmi',
    },
    {
      'id': 1,
      'header': 'Surat Lantikan Peguam',
      'icon': Icon(Icons.add_circle_outlined),
      'title': 'test',
    },
    {
      'id': 2,
      'header': 'Surat hubungan peguam dan pemilik daftar',
      'icon': Icon(Icons.add_circle_outlined),
      'title': 'test',
    },
  ];

  int _selected = 0;
  int index = 0;
  int _count = 1;
  late List<Widget> _upload = List.generate(_count, (int i) => UploadDoc());

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: _count,
      itemBuilder: (context, index) {
        return Column(
          children: [
            Container(
                width: double.infinity,
                height: 30,
                color: Colors.grey,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(width: 10),
                    Text(listSelection[index]['header'],
                        style: TextStyle(
                            color: Colors.black, fontWeight: FontWeight.bold)),
                  ],
                )),
            ListTile(
              leading: listSelection[index]['icon'],
              title: Text(listSelection[index]['header']),
              onTap: _addNewUploadDoc,
            ),
          ],
        );
      },
      separatorBuilder: (context, index) => const Divider(thickness: 1),
    );
  }

  void _addNewUploadDoc() {
    setState(() {
      if (_count < listSelection.length) {
        _count = _count + 1;
      }
    });
  }
}

Answer 2

我不建议在 Map 中声明 Icon，因为所有图标都是相同的。而是直接在 ListTile 中使用图标。下面的代码为每个添加 1 个项目。如果你想一次添加所有项目，你可以将 _addNewUploadDoc 更改为

void _addNewUploadDoc() {
  if(listSelection.length != selected.length){
    for (int i = 0; i < listSelection.length-1; i++) {
      selected.add(listSelection[i]);
    }
    setState(() {});
  }
}

代码：

import 'package:flutter/material.dart';

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

  @override
  State<UploadDoc> createState() => _UploadDocState();
}

class _UploadDocState extends State<UploadDoc> {
  final List<Map<String, dynamic>> listSelection = [
    {
      'id': 0,
      'header': 'Muat Naik Surat Rasmi Permohonan',
      'title': 'Muat Naik Surat Rasmi',
    },
    {
      'id': 1,
      'header': 'Surat Lantikan Peguam',
      'title': 'test',
    },
    {
      'id': 2,
      'header': 'Surat hubungan peguam dan pemilik daftar',
      'title': 'test',
    },
  ];
  final List<Map<String, dynamic>> selected = [];

  // 'icon': const Icon(Icons.add_circle_outlined),
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    if (selected.isEmpty) {
    selected.add(listSelection[0]);
    }
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemCount: selected.length,
        itemBuilder: (ctx, index) {
          return Column(
            children: [
              Container(
                  width: double.infinity,
                  height: 30,
                  color: Colors.grey,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      const SizedBox(width: 10),
                      Text(listSelection[index]['header'],
                          style: const TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold)),
                    ],
                  )),
              ListTile(
                leading: const Icon(Icons.add_circle_outlined),
                title: Text(listSelection[index]['header']),
                onTap: () => _addNewUploadDoc(),
              ),
              const Divider(thickness: 1)
            ],
          );
        },
      ),
    );
  }

  void _addNewUploadDoc() {
    setState(() {
      print('_addNewUploadDzzoc');
      print(selected.length);
      print(listSelection.length);
      if (listSelection.length > selected.length) {
        selected.add(listSelection[selected.length]);

      }
    });
  }
}

单击当前列表时如何添加新列表

How to add new list when I click on the current list

flutter

dart

flutter-layout