像 snapchat 一样颤动底片

Question

我想创建一个带有选项卡的底板，选项卡下方有一个选项卡视图可以滚动，而无需滚动选项卡及其上方的手柄。当拉起手柄时，底片将展开至最大高度，而不会在另一个高度处停止。

就像在 Snapchat 上一样，当您想更换 Bitmoji 衣服时。

我的尝试：

    return Scafold(
    ....
    bottomSheet: DraggableScrollableSheet(
          maxChildSize: 0.7,
          minChildSize: 0.54,
          initialChildSize: 0.54,
          expand: false,
          builder: (context2, controller2) {
            return CustomScrollView(
              controller: controller2,
              physics: BouncingScrollPhysics(),
              slivers: [
                SliverAppBar(
                  pinned: true,
                  primary: false,
                  automaticallyImplyLeading: false,
                  centerTitle: true,
                  // snap: true,
                  // floating: true,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(30))),
                  title: Container(
                    width: s.width / 3,
                    margin: const EdgeInsets.symmetric(vertical: 10),
                    height: s.width / 60,
                    decoration: BoxDecoration(
                        color: AppColor.primary,
                        borderRadius: BorderRadius.circular(30)),
                  ),
                  bottom: TabBar(
                    controller: tabController,
                    isScrollable: true,
                    tabAlignment: TabAlignment.start,
                    physics: BouncingScrollPhysics(),
                    tabs: const [
                      Tab(child: Icon(Icons.ac_unit)),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                      Tab(
                        child: Icon(Icons.back_hand),
                      ),
                      Tab(
                        child: Icon(Icons.ac_unit),
                      ),
                    ],
                  ),
                ),
                SliverFillRemaining(
                  child: TabBarView(
                      physics: BouncingScrollPhysics(),
                      controller: tabController,
                      children: const [
                        Text(
                            "data\ngggg\ngggg\nggggg\ngggg\ng\ng\ng\ng\ng\ng\ng\n"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                        Text("data2"),
                        Text("data"),
                      ]),
                )
              ],
            );
          },
        ),
       );

结果：

• tabView内容出现在选项卡后面
• 当拉起手柄时，底片展开为多层。

Answer 1

解决方案是用具有形状的材质包裹 DraggableScrollableSheet。

 return Scafold(
...
bottomSheet: Material(
          clipBehavior: Clip.hardEdge,
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(top: Radius.circular(30))),
          child: DraggableScrollableSheet(
...

您可以删除 SliverAppBar 中的形状。 :)