flutter - 我想在一个容器中显示 ListView，它的大小随着列表项的增加而动态增加

Question

我想在一个盒子里显示 ListView，它的大小随着列表项的增加而增加，并且 ListView 的子项是可滑动的，但是当我滑动列表项时，幻灯片动画会从 ListView 容器中出来。

预期的：

身体

 body: SafeArea(
            child: Scaffold(
              body: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Container(
                      child: Padding(
                        padding: const EdgeInsets.only(
                            left: 10, top: 8.0, bottom: 8, right: 10),
                        child: Container(
                          color: Colors.white54,
                          width: double.infinity,
                          height: 30,
                          child: CupertinoTextField(
                            showCursor: false,
                            autofocus: false,
                            placeholder: "Search",
                            style: TextStyle(fontSize: 15),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.grey[200],
                            ),
                            prefix: Align(
                              alignment: Alignment.center,
                              child: Padding(
                                padding: const EdgeInsets.only(left: 5),
                                child: Icon(
                                  Icons.search,
                                  color: Colors.grey[400],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.yellow),
                        child: getNoteFolderListView(),  //Function for ListView
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

ListView 函数 该函数返回带有可滑动列表图块的列表视图，但可滑动列表图块在滑动时会脱离列表视图容器。

 ListView getNoteFolderListView() {
final SlidableController slidableController = SlidableController();

return ListView.separated(
  shrinkWrap: true,
  padding: EdgeInsets.only(top: 0),
  physics: NeverScrollableScrollPhysics(),
  separatorBuilder: (context, index) => Divider(
    color: Colors.black,
    endIndent: 10,
    height: 0,
    indent: 80,
  ),
  itemCount: count,
  itemBuilder: (BuildContext context, int position) {
    return Slidable(
      actionExtentRatio: .15,
      key: Key(''),
      closeOnScroll: true,
      controller: slidableController,
      child: ListTileTheme(
        style: ListTileStyle.drawer,
        dense: true,
        child: ListTile(
          hoverColor: Colors.grey,
          // tileColor: Color(0xffF9F9F9),
          tileColor: Colors.transparent,
          onTap: () {
            navigateToNoteList(this.noteFolderList[position],
                this.noteFolderList[position].title);
          },
          leading: Icon(
            Icons.folder_open_outlined,
            color: Colors.grey[500],
          ),
          title: Align(
            alignment: Alignment(-1.18, -.2),
            child: Text(
              this.noteFolderList[position].title,
              style: TextStyle(fontSize: 15),
            ),
          ),
          trailing: Text('${this.noteFolderList[position].id}'),
        ),
      ),
      actionPane: SlidableScrollActionPane(),
      actions: <Widget>[
        IconSlideAction(
          icon: Icons.pin_drop,
          color: Colors.yellow[600],
        )
      ],
      secondaryActions: <Widget>[
        IconSlideAction(
          icon: Icons.share,
          color: Colors.blueAccent,
          onTap: () {
            debugPrint("Share Icon Tapped");
          },
        ),
        IconSlideAction(
          icon: Icons.folder_open,
          color: Colors.purpleAccent,
          onTap: () {
            debugPrint("Folder Open Button Clicked");
          },
        ),
        IconSlideAction(
          icon: Icons.delete,
          color: Colors.red,
          onTap: () {
            setState(() {
              debugPrint("Delte Button Clicked");
              delete(noteFolderList[position]);
              updateNoteFolderList();
            });
          },
        ),
      ],
    );
  },
);

}

标签： flutterlistview