在flutter中使用setstate更新listview中的单个项目

时间:2019-11-21 06:51:20

标签: flutter carousel flutter-layout

我有一个清单(食品)。每个食物都有2个选项,既可以从图库中上传图像,也可以通过相机拍摄照片。因此,要求就像当我从图库浏览图像时,仅应在该特定食物下显示。但是我的问题是,这张图片显示在所有食品下。

这是图片:

enter image description here

我有一个课程来存储食品和图片列表

class FoodListClass{
 String foodName;
 List<String> imageList;
}

在CustomScrollView的内部,有SliverList,而该旋转显示  在下面显示行项目

Widget getRowItem(){
    return SliverList(
      ///Use SliverChildListDelegate and provide a list
      ///of widgets if the count is limited
      ///
      ///Lazy building of list
      delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
          /// To convert this infinite list to a list with "n" no of items,
          /// uncomment the following line:
          /// if (index > n) return null;
              ///
         print("FoodList Length");
            print(foodListClass.length);

            if(foodListClass.length<=index){
              return null;
            }else{
              return getFoodList(foodListClass[index].foodName);
            }

          }

        /// Set childCount to limit no.of items
        /// childCount: 100,
      ),
    );
  }

上面的getFoodList()函数内部,显示食物清单和食物,仅在此处显示食物代码。

     Padding(
            padding: EdgeInsets.symmetric(vertical: 15.0),
            child: Column(children: [

              CarouselSlider(
                items: child, // for changing the child for items below //function(setImageAndChangeOriginal) is using
                scrollPhysics: BouncingScrollPhysics(),
                enableInfiniteScroll: false,
                autoPlay: false,
                enlargeCenterPage: true,
                viewportFraction: 0.9,
                aspectRatio: 2.0,
              ),
            ])),

//用于更改以下功能项的子项正在使用

 setImageAndChangeOriginal(File _image, String image, String foodName){
        List<String> tempImageList = [];
          setState(() {
            if(null != _image){
              //imgList.add(_image.path);//image from camera or gallery
              for(int i =0;i<foodListClass.length;i++) {
                if (foodListClass[i].foodName == foodName) {

                  foodListClass[i].imageList.add(_image.path);
                }
              }



            }
          });

    // changing the state here with new imagelist, here is the issue, all imagelist in UI got //reflected but my object list is having imagelist count 3 for first item only.
          setState(() {
            for(int i =0;i<foodListClass.length;i++) {
              if (foodListClass[i].foodName == foodName) {

                child = map<Widget>(//here changing the child and creating a new container
                  foodListClass[i].imageList,
                      (index, i) {
                    return Container(
                      margin: EdgeInsets.all(5.0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        child: Stack(children: <Widget>[
                          new Container(
                            width: 1000,

                            decoration: new BoxDecoration(
                              color: const Color(0xff7c94b6),

                              image: new DecorationImage(
                                image: new ExactAssetImage(i),
                                fit: BoxFit.cover,
                              ),

                            ),
                          ),

                          Positioned(
                            bottom: 0.0,
                            left: 0.0,
                            right: 0.0,
                            child: Container(
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
                                  begin: Alignment.bottomCenter,
                                  end: Alignment.topCenter,
                                ),
                              ),
                              padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                              child: Text(
                                'No. $index image',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ]),
                      ),
                    );
                  },
                ).toList();


              }
            }
          });



      }

0 个答案:

没有答案