Question

我想创建一个列表，当数据从某个值（不是JSON形式）更改时，然后显示这些值：

ProcedureList(brand: widget.brandSelected, filteredkits: snapshot.data,),

这是列表小部件，我从其他小部件和列表中传递了2个值Brand Selected。

如何更改值时显示的动态列表。我猜有一个主要的小部件，在brandSelected更改时需要StatefulWidget（在其他小部件上调用函数时更改），然后使用新的brandSelected重建ListView：

class LoanerBookingCatalog extends StatefulWidget {
  @override
  _LoanerBookingCatalog createState() => _LoanerBookingCatalog();

  String brandSelected ;
  List<Kits> filteredkids;
  bool changed = false;

  getBrandSelected(String brand, List<Kits> filteredkitsbones){
    print(brand);
    brandSelected  = brand;
    filteredkids = filteredkitsbones;
    changed = true;
  }



}


class _LoanerBookingCatalog extends State<LoanerBookingCatalog>{

final KitsData kitsFetcher = KitsData();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(40.0), // here the desired height
        child: new AppBar(
          leading: SizedBox(
            height: 20.0,
            width: 20.0,
            child: GestureDetector(
              child: Image.asset(
                "images/backbtn.png",
                height: 5.0,
                width: 5.0,
              ),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ),
          backgroundColor: Colors.white24,
          title: new Text(
            "PRODUCTS CATALOGUE",
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.grey[700],
            ),
          ),
        ),
      ),
      body: FutureBuilder(
          future: kitsFetcher.fetch(),
          builder: (BuildContext context, AsyncSnapshot<List<Kits>> snapshot) {
            if (snapshot.hasData) {
              var bonesWidget = BonesWidget(
                kitlist: snapshot.data,
                getBrandSelectedandList: widget.getBrandSelected,
              );
              return Stack(
                alignment: AlignmentDirectional.center,
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: AssetImage("images/backgroundCatalog.png"))),
                  ),
                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        bonesWidget,
                        widget.changed == true ? Container():
                        ProcedureList(brand: widget.brandSelected, filteredkits: snapshot.data,),

和ProcedureList WidgetCode：

class ProcedureList extends StatefulWidget{

  @override
  _ProcedureList createState() => _ProcedureList();

  String brand ;
  List<Kits> filteredkits;
  ProcedureList({Key key, this.brand, this.filteredkits}) : super(key: key);
}

class _ProcedureList extends State<ProcedureList> {

  @override

  Widget build(BuildContext context) {
          var procedureList = widget.filteredkits.where((kit) => kit.brand == widget.brand)
            .map((kit) => kit.procedure)
            .toList();

    return Expanded(
      flex: 2,
      child: Container(
        padding: EdgeInsets.only(left: 35.0),
        child: new ListView.builder(
          physics: ClampingScrollPhysics(),
          shrinkWrap: true,
          itemCount:  procedureList.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: EdgeInsets.all(6.0),
              child: Column(
                children: <Widget>[
                  new Container(
                    width: 300.0,
                    height: 30.0,
                    color: Colors.grey[700],
                    padding: EdgeInsets.all(6.0),
                    child: new Text(widget.brand),
                  ),
                  SizedBox(
                    height: 60.0,
                    child: new ListView.builder(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      itemCount: procedureList.length,
                      itemBuilder: (BuildContext context, int index) =>
                          GestureDetector(
                            child: new Card(
                              color: Colors.transparent,
                              child: new Column(
                                children: <Widget>[
                                  new Text(procedureList[index])
                                ],
                              ),
                            ),
                          ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

在名为Bones小部件的小部件上调用函数时，数据发生更改，然后得到2个参数：1ºString Brand，2ºList。有了这两个参数，我每次使用该函数时都需要刷新ProcedureListWidget，因为这样我才能获取数据。

Answer 1

解决方案是，当您想更改值时，应在状态下调用setState函数，然后小部件将再次呈现。示例：

setState(() {
      loading = true;
});

很明显，可以在StatefulWidget

中访问此功能

数据/值更改时如何重建小部件？

1 个答案: