Перетаскиваемый прокручиваемый лист становится не прокручиваемым, когда мы устанавливаем его дочерним элементом в столбец

Question

У меня есть следующий код для Flutter.

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

В приведенном выше коде я пытаюсь сделать так, чтобы меня можно было перетаскивать вверх или вниз, когда пользователь перетаскивает лист. Как ни стараюсь, не получается перетащить или свернуть лист. Он остается там, где он есть.

Более того, что-то интересное произойдет, если я установлю для свойства my значение, полученное из метода в. В этом случае становится перетаскиваемым, если мы попытаемся прокрутить.

Но я хочу, чтобы его можно было перетаскивать, если я перетаскиваю из общей области листа. Как реализовать это в вышеизложенном DraggableScrollableSheet?

(Я также попытался обернуть возвращаемый виджет внутри метода с помощью параметров и controller собственность ListView к scrollController что я получаю от builderметод. Но это также дает ошибку рендеринга. Я не мог найти способ исправить это.)

Может кто-нибудь помочь?

Answer 1

Вам просто нужно пройтиscrollControllerиз DraggableScrollableSheet в 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 ')),
                  ],
                ),
              ),
            ),
          ),