按下按钮创建额外的卡片

Question

我有一个带卡片的有状态小部件 class，该卡片有一个下拉菜单和一个文本字段。有一个 Floatingactionbutton，我想在按下 floatingactionbutton 时创建一张附加卡。我想我应该为这个小部件创建一个列表，但我不太确定如何去做。

这是卡片的代码。

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

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

class _CustomerCurrentSuppliersState extends State<CustomerCurrentSuppliers> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.blue,
        child: Icon(Icons.add),
        onPressed: () {
//This is where the code to create additional cards come in  ------>
},
      ),
       body: Padding(
         padding: const EdgeInsets.only(top: 38.0, right: 10, left: 10),
         child: Column(
           children: [
             Container(
               height: 170,
               child: Card(
                  child:
                  Column(
                    children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: DropdownButtonHideUnderline(
                            child: FormBuilderDropdown(
                            name: 'dropdown',
                                hint: Text("Year"),
                             isExpanded: true,
                             items: [
                               "2018",
                               "2019",
                               "2020",
                               "2021",
                             ].map((option) {
                               return DropdownMenuItem(
                                 child: Text("$option"),
                                 value: option,
                               );
                             }).toList(),
                       ),
                     ),
                          ),

                      SizedBox(height: 20,),


                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: FormBuilderTextField(
                          name: 'Region',
                          decoration: InputDecoration(
                              labelText: "Amount",
                              border: OutlineInputBorder()),
                          validator: FormBuilderValidators.compose([
                            FormBuilderValidators.required(context),
                          ]),
                        ),
                      ),

                    ],
                  ),

                 elevation: 8,
                ),
             ),
             
           ],
         ),
       ),
    );
  }
}

Answer 1

您可以创建 List 并在按下 fab 时递增 List。

class CustomerCurrentSuppliers extends StatefulWidget {
  @override
  _CustomerCurrentSuppliersState createState() =>
      _CustomerCurrentSuppliersState();
}

class _CustomerCurrentSuppliersState extends State<CustomerCurrentSuppliers> {
  int cardCount = 1;
  List<int> cardList = [1];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.blue,
        child: Icon(Icons.add),
        onPressed: () {
          cardCount += 1;
          cardList.add(cardCount);
          setState(() {});
        },
      ),
      body: Padding(
          padding: const EdgeInsets.only(top: 38.0, right: 10, left: 10),
          child: ListView.builder(
              itemCount: cardList.length,
              itemBuilder: (content, index) {
                return Container(
                  height: 170,
                  child: Card(
                    child: Column(
                      children: [
                        Text('FormBuilderDropdown'),
                        SizedBox(
                          height: 20,
                        ),
                        Text('Region')
                      ],
                    ),
                    elevation: 8,
                  ),
                );
              })),
    );
  }
}

注意：您必须在按下按钮时处理 errors/add 更多逻辑，否则每次用户按下按钮时列表都会递增。

Answer 2

你没有提供完整的代码，但我明白你想要的逻辑。

这是代码。

import 'package:flutter/material.dart';
class CustomerCurrentSuppliers extends StatefulWidget {
  const CustomerCurrentSuppliers({Key key}) : super(key: key);

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

class _CustomerCurrentSuppliersState extends State<CustomerCurrentSuppliers> {

   int counter=1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.blue,
        child: Icon(Icons.add),
        onPressed: () {
         setState(() { //setState is used to update the UI
           counter++;
         });
        },
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 38.0, right: 20, left: 20),
        child: ListView.builder(
          itemCount: counter, //updating counter will update the UI with new card
            itemBuilder: (context,index){
            return Card( 
              child: Center(
                child: Text(
                  "This is card ${index+1}"
                ),
              ),
            );

        }),
      ),
    );
  }
}

按下按钮创建额外的卡片

Create additional cards on button press

dart

flutter

card