Flutter/Dart 创建新用户时自动创建容器

Question

我是 Flutter 的新手...请问我该怎么做：当我插入新的技术人员时，它会自动创建一个新卡（容器）。我用for (int i = 0; i < 10; i++) 测试了一下。

 return Container(
          height: height,
          width: width,
          child: Scaffold(
              body: Stack(
                children: <Widget>[
    GoogleMap(
                    initialCameraPosition: _initialLocation,
                    myLocationEnabled: true,
                    myLocationButtonEnabled: false,
                    mapType: MapType.normal,
                    zoomGesturesEnabled: true,
                    zoomControlsEnabled: false,
                    onMapCreated: (GoogleMapController controller) {
                      mapController = controller;
                    },
                  ),
    
    
                  Container(
                    padding: EdgeInsets.only(top: 550, bottom: 50),
                    child: ListView(
                      padding: EdgeInsets.only(left: 20),
                      children: getTechniciansInArea(),
                      scrollDirection: Axis.horizontal,
                    ),
                  ),
                ],
              )
          ),
        );
      }

List<Technician> getTechies() {
    List<Technician> techies = [];
    //For testing...
     //for (int i = 0; i < 10; i++) {

   
    Technician myTechy = Technician("Store name test", "Address store ", "Address costumer", 529.3, 4, "Available", "fdfd");

    techies.add(myTechy);
    //}
    return techies;
  }

  List<Widget> getTechniciansInArea() {
    List<Technician> techies2 = getTechies();
    List<Widget> cards = [];
    for (Technician techy in techies2) {
      cards.add(technicianCard(techy, context));
    }
    return cards;
  }
}

Widget technicianCard(Technician technician, BuildContext context) {
  return
    InkWell( // when click...
        child:
        Container(
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.only(right: 20),
            width: 180,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 0.5,
                ),],
            ),
            child:
            Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[

                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(height: 5,),
                      Text(technician.name, style: TextStyle(fontSize: 19,fontWeight: FontWeight.bold), textAlign: TextAlign.center),
                      SizedBox(height: 10,),
                      Text("AS: " + technician.phoneNum, style: TextStyle(fontSize: 15)),
                      SizedBox(height: 10,),
                      Text("AC: " + technician.address, style: TextStyle(fontSize: 15)),
                      SizedBox(height: 30,),
                    ],
                  ),

                  GestureDetector(
                    child:
                    Container(
                        alignment: Alignment.bottomCenter,
                        width: 120.0,
                        height: 40.0,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          color: Color(0xffeb5c68),
                        ),
                        child:
                        Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[


                              Text("REQUEST", textAlign: TextAlign.center,style: TextStyle(color: Colors.white),),
                            ]
                        )
                    ),
                    onLongPress: (){

                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => Page2()),
                      );
                    },
                  )
                ]
            )
        ),

        onTap: () {

        }
    );
}

    //********************************** PAGE 2 **********************************
class Page2 extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("YOUR ORDERS"),
        backgroundColor: Colors.green
      ),
    );
  }
}

Technician 类

class Technician {
  String name;
  String phoneNum;
  String address;
  double rate;
  String status;
  int rating;
  String occupation;

  Technician(this.name, this.phoneNum, this.address, this.rate, this.rating, this.status, this.occupation);
}

Answer 1

你可以这样：ListView 使用 builder 方法。然后在您的构建器中，您将调用您的Widget technicianCard 创建。 （项目数应该是您的技术人员列表的长度）