Flutter 自定义底部 sheet

Question

我有一个 ListView，我想在其中实现一种使用底部 sheet 并启用操作来删除列表项的好方法。最初，我只是在 onLongPress 事件处理程序中为我的列表项调用 showBottomSheet()，这将成功打开底部 sheet 并打开我的操作按钮。但是，这会自动向 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（底部高度 sheet），16（一些默认填充，如果您愿意，可以使它看起来更好）。

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

Flutter 自定义底部 sheet

Flutter custom bottom sheet

flutter

flutter-layout

flutter-animation