DraggableScrollableSheet 滚动问题

Question

我正在尝试克隆 youtube 的评论部分。 但是，当我滚动底部工作表注释时（只有当我抓住底部工作表的顶部并拉动它时，该注释才应该展开），它就会扩展。我希望我能够充分解释。

DraggableScrollableSheet(
  initialChildSize: 0.55,
  maxChildSize: 1,
  snap: true,
  snapSizes: const [
    0.55,
    1,
  ],
  builder: (context, scrollController) => Container(
    color: Color(0xff181818),
    child: ListView(
      controller: scrollController,
      children: [
        customAppBar(context),
        Row(
          children: [
            const SizedBox(
              width: 15,
            ),
            filter("All", Colors.white, Colors.black),
            const SizedBox(
              width: 15,
            ),
            filter("News", Colors.grey.withOpacity(0.2), Colors.white),
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        ListView(
          shrinkWrap: true,
          physics: ScrollPhysics(),
          children: [
            SizedBox(
              height: 45,
              width: double.infinity,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 15.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const CircleAvatar(
                      radius: 26,
                      backgroundColor: Colors.pink,
                      child: Text(
                        "R",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 22,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    const SizedBox(
                      width: 10,
                    ),
                    Expanded(
                        child: TextFormField(
                      decoration: InputDecoration.collapsed(
                          hintText: "Add a comment...",
                          hintStyle: TextStyle(
                              color: Colors.white.withOpacity(0.6),
                              fontSize: 20)),
                    ))
                  ],
                ),
              ),
            ),
            Divider(
              color: Colors.white.withOpacity(0.5),
              thickness: 1,
              height: 30,
            ),
            comment(),
            comment(),
            comment(),
            comment(),
            comment(),
            comment(),
          ],
        ),
      ],
    ),
  ),
);

buildBottomSheet(context) => showModalBottomSheet(
  isDismissible: false,
  backgroundColor: Colors.transparent,
  context: context,
  isScrollControlled: true,
  barrierColor: Colors.transparent,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  builder: (context) => Sheet(),
);

我该怎么做才能使评论在自身内部滚动，并且底部工作表只能在从底部工作表顶部拉动时才能展开？

Answer 1

当我使用脚手架创建底部工作表、创建应用程序栏和列表视图、为应用程序栏提供可拖动的滚动表滚动控制器并向列表视图提供单独的滚动控制器时，问题得到解决。

DraggableScrollableSheet(
  initialChildSize: 0.55,
  maxChildSize: 1,
  snap: true,
  expand: false,
  snapSizes: const [
    0.55,
    1,
  ],
  builder: (context, scrollController) => Scaffold(
    backgroundColor: Colors.black,
    appBar: PreferredSize(
        child: customAppBar(context, scrollController),
        preferredSize: Size.fromHeight(100)),
    body: Container(
      color: Color(0xff181818),
      child: ListView(
        shrinkWrap: true,
        children: [
          Row(
            children: [
              const SizedBox(
                width: 15,
              ),
              filter("All", Colors.white, Colors.black),
              const SizedBox(
                width: 15,
              ),
              filter("News", Colors.grey.withOpacity(0.2), Colors.white),
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          SizedBox(
            height: 45,
            width: double.infinity,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const CircleAvatar(
                    radius: 26,
                    backgroundColor: Colors.pink,
                    child: Text(
                      "R",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 22,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Expanded(
                      child: TextFormField(
                    decoration: InputDecoration.collapsed(
                        hintText: "Add a comment...",
                        hintStyle: TextStyle(
                            color: Colors.white.withOpacity(0.6),
                            fontSize: 20)),
                  ))
                ],
              ),
            ),
          ),
          Divider(
            color: Colors.white.withOpacity(0.5),
            thickness: 1,
            height: 30,
          ),
          ListView.builder(
              shrinkWrap: true,
              controller: myScrollController,
              itemCount: 10,
              itemBuilder: ((context, index) => comment())),
        ],
      ),
    ),
  ),
);

} }

Answer 2

您需要像

maxChildSize:.55

那样进行更改，因此内部按扣不能比这个大。设置 1 将提供拖动以全屏显示。

builder: (context) => DraggableScrollableSheet(
      initialChildSize: 0.55,
      maxChildSize: 1,
      snap: true,
      snapSizes: const [
        0.55,
      ],

Answer 3

它不滚动的主要原因是，当您放下该

DraggableScrollableSheet

的子级时，您必须将这些子级包裹在

SingleChildScrollView

中，并且需要将

scrollController

分配给我们正在使用的控制器进入 DraggableScrollableSheet 的构建器。

例如：-

    DraggableScrollableSheet(
        initialChildSize: 0.33,
        maxChildSize: 1,
        minChildSize: 0.2,
        expand: true,
        shouldCloseOnMinExtent: false,
        snapSizes: [0.33, 0.45],
        builder: (context, scrollController) {
          return Container(
                  child: SingleChildScrollView(
                    controller: scrollController,
                    scrollDirection: Axis.vertical,
                    child: Column(
                      children: [
                        _buildDragHandleWidget(context),
                        _buildBottomSheetHeaderTextWidget(),
                        _buildBottomSheetSubHeaderTextWidget(),
                        _buildSearchTextFieldWidget(),
                        _buildConfirmLocationButtonWidget(context),
                      ],
                    ),
),
          );
        });