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

Question

我在 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

能够在用户拖动工作表时向上拖动或向下折叠。无论我如何尝试，我都无法拖动或折叠该工作表。它留在原处。

此外，如果我将

controller

的

ListView

属性设置为从

scrollController

中的

builder

方法获得的

DraggableScrollableSheet

，会发生一些有趣的事情。在这种情况下，如果我们尝试滚动

DraggableScrollableSheet

，则

ListView

变得可拖动。

但是如果我从工作表的一般区域拖动，我希望

DraggableScrollableSheet

可以拖动。如何实现上面的

DraggableScrollableSheet

？

（我还尝试使用

builder

包装在

ListView

方法内返回的小部件，并将

controller

的

ListView

属性设置为我从

scrollController

方法获得的

builder

。但是这个也给出了渲染错误。我找不到解决这个问题的方法。）

有人可以帮忙吗？

Answer 1

您只需要将 DraggableScrollableSheet 的

scrollController

传递给 SingleChildScrollView 即可。

      DraggableScrollableSheet(
          initialChildSize: 0.6,
          minChildSize: 0.6,
          builder: (BuildContext context, ScrollController scrollController) {
            return SingleChildScrollView(
              controller: scrollController,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: [Container(height: 2000)],
              ),
            );
          },
        ),
        

Answer 2

您需要将

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,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      );
    });

Answer 3

它有效：

         onTap: () => showModalBottomSheet<void>(
            context: context,
            useRootNavigator: true,
            isScrollControlled: true, // set this to true
            builder: (_) => DraggableScrollableSheet(
              initialChildSize: 0.9,
              maxChildSize: 1.0,
              expand: false,
              builder: (_, controller) => SingleChildScrollView(
                controller: controller,
                child: const Column(
                  children: [
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                  ],
                ),
              ),
            ),
          ),

Answer 4

仅当

initialChildSize

等于

minChildSize

时才会发生。所以解决办法就是设置不同的值。例如：

    DraggableScrollableSheet(
      expand: false,
      maxChildSize: 0.7,
      initialChildSize: 0.5001,
      minChildSize: 0.5,
      builder: (context, controller) {},