flutter - 我想在 Flutter 中更新 AnimatedList 中的项目数

Question

在上图中，我有一个水平列表视图。通过从列表视图中选择任何一个数字，我想根据从水平列表视图中选择的数字更新 AnimatedList 视图的项目。

当我录制任何一个号码时

 onTap: () {
                      setState(() {
                        selectedIndex = index;
                        print(selectedIndex);
                      });
                    },

我的 AnimatedList 的代码

Expanded(
            child: AnimatedList(
              key: key,
              initialItemCount: selectedIndex + 1,
              itemBuilder: (context, index, animation) =>
                  buildItem(items[index], index, animation),
            ),
          ),

           Widget buildItem(item, int index, Animation<double> animation) =>
      ExerciseItemWidget(
          item: item, animation: animation, onClicked: () => removeItem(index));

在我的练习项小部件中

        class ExerciseItemWidget extends StatelessWidget {
final ExerciseItem item;
final Animation animation;
final VoidCallback onClicked;

const ExerciseItemWidget({
  @required this.item,
  @required this.animation,
  @required this.onClicked,
  Key key,
}) : super(key: key);

@override
Widget build(BuildContext context) => ScaleTransition(
      scale: animation,
      child:
      Container(
        margin: EdgeInsets.only(left: 30, right: 10, top: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: Colors.transparent,
        ),


        child:  Row(
          children: [
            Container(
              width: 40,
              child:
              IconButton(
                padding: EdgeInsets.only(right: 10),
                icon: Icon(Icons.check_box_outlined, color: Colors.yellow, size: 32),
                onPressed: onClicked,
              ),),
            Expanded(
                child: Container(
                  margin:
                  EdgeInsets.only(right: 10),
                  height: 40,
                  child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        '',
                        style: TextStyle(
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                            fontFamily: "Kanit"),
                        textAlign: TextAlign.center,
                      )),
                  decoration: BoxDecoration(
                    color: Colors.black,
                  ),
                )),
            Expanded(
                child: Container(
                  margin:
                  EdgeInsets.only(right: 10),
                  height: 40,
                  child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "",
                        style: TextStyle(
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                            fontFamily: "Kanit"),
                        textAlign: TextAlign.center,
                      )),
                  decoration: BoxDecoration(
                    color: Colors.black,
                  ),
                )),
            Expanded(
                child: Container(
                  margin:
                  EdgeInsets.only(right: 10),
                  height: 40,
                  child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "",
                        style: TextStyle(
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                            fontFamily: "Kanit"),
                        textAlign: TextAlign.center,
                      )),
                  decoration: BoxDecoration(
                    color: Colors.black,
                  ),
                )),
            Container(
              width: 40,
                child:
IconButton(
  padding: EdgeInsets.only(right: 10),
    icon: Icon(Icons.delete_rounded, color: Colors.yellow, size: 32),
    onPressed: onClicked,
  ),),
          ],
        ),

      ),
    );
}

Answer 1

initialItemCount属性必须设置items.lenght 你必须调整items列表。我不建议清除列表：items = []而是使用此方法：

void resizeList(int newLenght){
    if(items.length > newLenght){
      //TODO: remove since (newLenght) index.
    }else if(items.length < newLenght){
      //TODO: add (newLenght - items.length) items
    }
  }

在选择的号码上：

onTap: () {
        setState(() {
            resizeList(index+1);
        });
},

对不起，我的英语很基础：P