当我们将它的子项设置为列时，可拖动的可滚动工作表变得不可滚动

Posted 2023-02-23

【中文标题】当我们将它的子项设置为列时，可拖动的可滚动工作表变得不可滚动

【英文标题】：Draggable Scrollable Sheet becomes unscrollable when we set it's child to a column

【发布时间】：2022-01-22 14:58:38

【问题描述】：

我在 Flutter 中有 DraggableScrollableSheet 的以下代码。

DraggableScrollableSheet(
  builder: (BuildContext context, ScrollController scrollController) 
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(35),
        topRight: Radius.circular(35),
      ),
      child: Container(
        color: ColorData.secondaryColor,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 10,
            horizontal: 15,
          ),
          child: Column(
            children: [
              Container(
                height: 3,
                width: 30,
                decoration: BoxDecoration(
                  color: ColorData.primaryDividerColor,
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
              const SizedBox(
                height: 18,
              ),
              SizedBox(
                width: _screenWidth,
                child: const Text(
                  'Exchange Houses',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              SizedBox(
                width: _screenWidth,
                child: const Text(
                  '(Tap to select)',
                  textAlign: TextAlign.start,
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Expanded(
                child: ListView.separated(
                  itemCount: 5,
                  itemBuilder: (context, index) => const ExchangeHouseCard(
                    id: 1,
                    houseName: 'Test House',
                    houseContactNumber: '[phone]',
                    houseUrl:
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                    houseImageUrl:
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                    houseLatitude: 7.0012345,
                    houseLongitude: 20.301456,
                    userCurrencyName: 'USD',
                    convertingCurrencyName: 'LKR',
                    exchangeRate: 200.00,
                    change: 500.00,
                    changeInConvertingCurrency: 1200.00,
                  ),
                  separatorBuilder: (context, index) => const SizedBox(
                    height: 5,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  ,
),

在上面的代码中，我试图让我的DraggableScrollableSheet 在用户拖动工作表时能够向上拖动或向下折叠。无论我如何尝试，我都无法拖动或折叠工作表。它保持在原来的位置。

此外，如果我将我的ListView 的controller 属性设置为我从DraggableScrollableSheet 中的builder 方法得到的scrollController，就会发生一些有趣的事情。在这种情况下，如果我们尝试滚动 ListView，DraggableScrollableSheet 将变为可拖动的。

但如果我从工作表的一般区域拖动，我希望 DraggableScrollableSheet 可以拖动。上面的DraggableScrollableSheet怎么实现这个？

（我还尝试使用ListView 将builder 方法中返回的小部件包装起来，并将ListView 的controller 属性设置为scrollController，这是我从builder 方法获得的。但这也会产生渲染错误。我找不到解决此问题的方法。）

有人可以帮忙吗？

【参考方案1】：

您需要将isScrollControlled 赋予true 并设置高度

    showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (context) 
      return DraggableScrollableSheet(
        initialChildSize: 0.9,
        maxChildSize: 0.9,
        builder: (BuildContext context, ScrollController scrollController) 
          return ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(35),
              topRight: Radius.circular(35),
            ),
            child: Container(
              color: ColorData.secondaryColor,
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  vertical: 10,
                  horizontal: 15,
                ),
                child: Column(
                  children: [
                    Container(
                      height: 3,
                      width: 30,
                      decoration: BoxDecoration(
                        color: ColorData.primaryDividerColor,
                        borderRadius: BorderRadius.circular(16),
                      ),
                    ),
                    const SizedBox(
                      height: 18,
                    ),
                    SizedBox(
                      width: _screenWidth,
                      child: const Text(
                        'Exchange Houses',
                        textAlign: TextAlign.start,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    SizedBox(
                      width: _screenWidth,
                      child: const Text(
                        '(Tap to select)',
                        textAlign: TextAlign.start,
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Expanded(
                      child: ListView.separated(
                        itemCount: 5,
                        controller: scrollController,
                        itemBuilder: (context, index) =>
                            const ExchangeHouseCard(
                          id: 1,
                          houseName: 'Test House',
                          houseContactNumber: '[phone]',
                          houseUrl:
                              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                          houseImageUrl:
                              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                          houseLatitude: 7.0012345,
                          houseLongitude: 20.301456,
                          userCurrencyName: 'USD',
                          convertingCurrencyName: 'LKR',
                          exchangeRate: 200.00,
                          change: 500.00,
                          changeInConvertingCurrency: 1200.00,
                        ),
                        separatorBuilder: (context, index) =>
                            const SizedBox(
                          height: 5,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        ,
      );
    );

【讨论】：

您好，感谢您的回复。这行得通。但问题只有一个。 ModalBottomSheet 的高度大于DraggableScrollableSheet。因此，DraggableScrollableSheet 可以通过拖动DraggableScrollableSheet 上方的空格来展开。关于使两个高度相等的任何建议？ （谢谢！）

你给backgroundColor: Colors.transparent了吗？

是的。然后那个空白变得透明。但是DraggableScrollableSheet 可以在滚动透明区域时被拖动吗？我正在努力避免这种情况。

哦，然后将maxChildSize 设置为0.9，

你需要根据自己的需要计算maxChildSize从0.0到1.0