Flutter 自定义底片

Question

我有一个 ListView，我想在其中使用带有操作的底部工作表来实现一种删除列表项的好方法。最初，我在onLongPress 事件处理程序中为我的列表项简单地调用showBottomSheet()，这将成功打开一个带有我的操作按钮的底部工作表。但是，这会自动向AppBar 添加一个后退按钮，这不是我想要的。

然后我就尝试了动画，比如SlideTransition和AnimatedPositioned：

class FoldersListWidget extends StatefulWidget {
  @override
  _FoldersListWidgetState createState() => _FoldersListWidgetState();
}

class _FoldersListWidgetState extends State<FoldersListWidget>
    with SingleTickerProviderStateMixin {
  double _bottomPosition = -70;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FutureBuilder<List<FolderModel>>(
          future: Provider.of<FoldersProvider>(context).getFolders(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, i) {
                final folder = snapshot.data[i];
                return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                  margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                  elevation: 1,
                  child: ListTile(
                    title: Text(folder.folderName),
                    leading: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          width: 50,
                          child: Consumer<FoldersProvider>(
                            builder:
                                (BuildContext context, value, Widget child) {
                              return value.deleteFolderMode
                                  ? CircularCheckBox(
                                      value: false,
                                      onChanged: (value) {},
                                    )
                                  : Icon(
                                      Icons.folder,
                                      color: Theme.of(context).accentColor,
                                    );
                            },
                          ),
                        ),
                      ],
                    ),
                    subtitle: folder.numberOfLists != 1
                        ? Text('${folder.numberOfLists} items')
                        : Text('${folder.numberOfLists} item'),
                    onTap: () {},
                    onLongPress: () {
                      Provider.of<FoldersProvider>(context, listen: false)
                          .toggleDeleteFolderMode(true); // removes fab from screen
                      setState(() {
                        _bottomPosition = 0;
                      });
                    },
                  ),
                );
              },
            );
          },
        ),
        AnimatedPositioned(
          bottom: _bottomPosition,
          duration: Duration(milliseconds: 100),
          child: ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25),
              topRight: Radius.circular(25),
            ),
            child: Container(
              height: 70,
              width: MediaQuery.of(context).size.width,
              color: Theme.of(context).colorScheme.surface,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Expanded(
                    child: IconAboveTextButton(
                      icon: Icon(Icons.cancel),
                      text: 'Cancel',
                      textColour: Colors.black,
                      opacity: 0.65,
                      onTap: () => setState(() {
                        _bottomPosition = -70;
                      }),
                    ),
                  ),
                  VerticalDivider(
                    color: Colors.black26,
                  ),
                  Expanded(
                    child: IconAboveTextButton(
                      icon: Icon(Icons.delete),
                      text: 'Delete',
                      textColour: Colors.black,
                      opacity: 0.65,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

这会使底部Container 在屏幕上滑动，但我的问题是它覆盖了最后一个列表项：

任何人都可以提出一种更好的方法，或者只是一种调整ListView 高度的方法，以便当Container 向上滑动时，ListView 也向上滑动。

Answer 1

将 ListView.builder 包装在一个容器内并将其底部填充设置为 (70+16) 70（底部工作表的高度）、16（一些默认填充，如果您愿意，可以让它看起来更好）。

return Container(
padding: EdgetInset.ony(bottom: (70+16)),
         child:ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, i) {
               .....
               .....