【问题标题】:I want to update the number of items in a AnimatedList in Flutter我想在 Flutter 中更新 AnimatedList 中的项目数
【发布时间】:2021-08-25 12:21:15
【问题描述】:

在上图中,我有一个水平列表视图。通过从列表视图中选择任何一个数字,我想根据从水平列表视图中选择的数字更新 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));

在我的 ExerciseItemWidget 中

        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,
  ),),
          ],
        ),

      ),
    );
}

【问题讨论】:

    标签: flutter flutter-animatedlist


    【解决方案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

    【讨论】:

    • 嗨@rparejo 我想将数据保留在项目中,只是我想更改'initialItemCount'。当 'selectedIndex' 值将增加或减少时,在 'setState()' 中的意思是,我只想在屏幕上显示该数据数。表示只想根据'selectedIndex'重新加载动画列表
    • 你不能那样做。你有items 列表,设置initialItemCount=items.length。要重新加载动画列表,请在索引更改时使用 setState() 调整项目列表的大小。我给你举个例子,试试看
    猜你喜欢
    • 2019-06-19
    • 2019-06-19
    • 1970-01-01
    • 2021-11-17
    • 2021-06-29
    • 2020-08-23
    • 1970-01-01
    • 2020-10-02
    • 2021-05-17
    相关资源
    最近更新 更多