ড্র্যাগেবল স্ক্রোলএবলশিটের ভিতরে তালিকা ভিউটি তেজস্ক্রিয়ায় স্ক্রোল করছে না

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

আমি ডেসলিস্ট উইজেট নিয়ে সমস্যা মনে করি। ডেসলিস্টের ভিতরে আপনি কোন উইজেটটি কলামটি ব্যবহার করছেন?

— এমএসক্রিশিশ

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

ধন্যবাদ..আমি সমাধান করেছি :)

— হাইশুটোষসিংহ