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

时间:2018-08-29 10:44:11

标签: listview dynamic dart flutter

我想创建一个列表,当数据从某个值(不是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,因为这样我才能获取数据。

1 个答案:

答案 0 :(得分:0)

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

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

很明显,可以在StatefulWidget

中访问此功能