ड्रैगबिलेबलस्क्रॉलटेबलशीट के अंदर सूची फ़्लटर में स्क्रॉलिंग नहीं

Question

मुझे नीचे की तरह बहुत भारी नेस्टेड डिज़ाइन दिया गया है, जब मेरी सूची के विस्तार की सूची का विस्तार होता है तो ऐसा प्रतीत नहीं होता है कि इसका कारण क्या है, बॉटमशीट का विस्तार हो जाता है, लेकिन इसके अंदर की सूची पर कोई ध्यान नहीं है, अगर मैं इसे स्क्रॉल करता हूं 'ऑपरेशनल ऑवर्स' टेक्स्ट को छूने से यह स्क्रॉल होने लगता है लेकिन जब यह ऊपर की तरफ जाता है तो मैं इसे नीचे नहीं गिरा सकता।

_showDialog(BuildContext context) {
    print("_showDialog");
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return DraggableScrollableSheet(
          expand: false,
          builder: (context, scrollController) {
            return Container(
              child: Stack(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Align(
                          alignment: Alignment.topCenter,
                          child: Container(
                              margin: EdgeInsets.symmetric(vertical: 8),
                              height: 8.0,
                              width: 70.0,
                              decoration: BoxDecoration(
                                  color: Colors.grey[400],
                                  borderRadius: BorderRadius.circular(10.0)))),
                      SizedBox(height: 16),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Text('Operational Hours',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: widget.isTab(context)
                                    ? TabTextStyles.mediumText
                                        .copyWith()
                                        .fontSize
                                    : PhoneTextStyles.mediumText
                                        .copyWith()
                                        .fontSize)),
                      ),
                    ],
                  ),
                  ListView(
                    controller: scrollController,
                    children: <Widget>[
                      SizedBox(height: 54.0),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              SizedBox(height: 20.0),
                              Text('Select days to add hours',
                                  style: widget.isTab(context)
                                      ? TabTextStyles.mediumText.copyWith()
                                      : PhoneTextStyles.mediumText.copyWith()),
                            ]),
                      ),
                      DaysList()
                    ],
                  ),
                ],
              ),
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                color: Theme.of(context).backgroundColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24.0),
                  topRight: Radius.circular(24.0),
                ),
              ),
            );
          },
        );
      },
    );
  }

Comments

मुझे लगता है कि DaysList विजेट के साथ समस्या है। आप जो कॉलम का उपयोग कर रहे हैं वह किस सूची में है?

— MSARKrish

Answer 1

कुछ गलतियाँ हैं जो आप कर रहे हैं। सबसे पहले, विगेट्स Columnको हमेशा शीर्ष पर दिखाई देने वाला है, दूसरा अपने DaysListअंदर लपेटें Expandedऔर ScrollControllerइसे पास करें।

यह आपकी विधि है:

void _showDialog(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return DraggableScrollableSheet(
        expand: false,
        builder: (context, scrollController) {
          return Column(
            children: <Widget>[
              // Put all heading in column.
              column,
              // Wrap your DaysList in Expanded and provide scrollController to it
              Expanded(child: DaysList(controller: scrollController)),
            ],
          );
        },
      );
    },
  );
}

यह आपका है Column:

Widget get column {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Align(
        alignment: Alignment.topCenter,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 8),
          height: 8.0,
          width: 70.0,
          decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(10.0)),
        ),
      ),
      SizedBox(height: 16),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Text('Operational Hours', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 20.0),
            Text('Select days to add hours'),
          ],
        ),
      ),
      SizedBox(height: 16),
    ],
  );
}

और यह है कि आपका कैसा DaysListदिखना चाहिए:

class DaysList extends StatelessWidget {
  final ScrollController controller;

  const DaysList({Key key, this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: controller, // assign controller here
      itemCount: 20,
      itemBuilder: (_, index) => ListTile(title: Text("Item $index")),
    );
  }
}

आउटपुट:

Comments

धन्यवाद दोस्त एक आकर्षण की तरह काम करता है, यह सिर्फ एक छोटी सी चाल थी।

— हशुतोषसिंह

मैं बॉटमशीट के अंत में बटन भी जोड़ना चाहता हूं जो स्क्रॉलिंग की परवाह किए बिना नीचे तय किया जाएगा..क्या मैं ऐसा कर सकता हूं?

— हशुतोषसिंह

@hiashutoshsingh क्या आप इसे अंतिम तत्व के रूप में सूची में रखना चाहते हैं, क्या मैं स्क्रीनशॉट प्राप्त करने का अनुरोध कर सकता हूं जिसे आप प्राप्त करने की कोशिश कर रहे हैं?

— CopsOnRoad

धन्यवाद..मैंने हल किया कि :)

— hiashutoshsingh