लक्ष्य एक यूआई डिज़ाइन करना है जो ट्विटर के प्रोफाइल पेज की तरह दिखता है, जहां आप उपयोगकर्ता की प्रोफ़ाइल (ब्लॉक ए) की जांच कर सकते हैं, फिर आपके पास एक टैब बार (ब्लॉक बी), और असीमित स्क्रॉल करने योग्य टैबव्यू (ब्लॉक सी) है। टैब बार को SliverAppBar की तरह काम करना चाहिए, जिसे ब्लॉक A के अंत तक स्क्रॉल करने पर "पिन किया" जा सकता है।

मैं प्रोफ़ाइल भाग (ब्लॉक ए) के साथ background विशेषता के साथ CustomScrollView के भीतर एक SliverAppBar बना सकता हूं, और प्रोफ़ाइल भाग की समीक्षा करने के लिए expandedHeight बड़ा सेट कर सकता हूं। हालांकि इस समाधान में, मुझे नहीं पता कि SliverFixedExtentList भाग को एक srollable tabviews में कैसे बनाया जाए और SliverAppBar को TabBar कैसे बनाया जाए।

इस समाधान के कोड:

  CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        pinned: true,
        expandedHeight: 450.0,
        flexibleSpace: FlexibleSpaceBar(
          collapseMode: CollapseMode.pin,
          background: Profile(), // Profile class show's the users name, picture, and bio, etc.
          title: Text('Demo'),
        ),
      ),
      SliverFixedExtentList(
        itemExtent: 50.0,
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlue[100 * (index % 9)],
              child: Text('List Item $index'),
            );
          },
        ),
      ),
    ],
  ),

एक अन्य समाधान: यदि मैं एक मचान के साथ टैब बार और टैब दृश्यों के निर्माण के साथ शुरू करता हूं, तो मुझे नहीं पता कि ब्लॉक ए बनाने के लिए ऐपबार के रूप में SliverAppBar को कैसे एकीकृत किया जाए।

सवाल यह है कि उन विगेट्स, एक SliverAppBar, एक मचान, और स्क्रॉल करने योग्य टैब को एक साथ कैसे एकीकृत किया जाए?

हर प्रकार की सहायता का स्वागत है, धन्यवाद!

0
ArtS 4 सितंबर 2020, 09:01

1 उत्तर

सबसे बढ़िया उत्तर

मैंने इसे स्पंदन: पिन किए गए टैबबार के साथ ढहने वाले ऐप बार की सहायता से बनाने में कामयाबी हासिल की .

      Scaffold(
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder: (context, value) {
              return [
                SliverAppBar(
                  floating: true,
                  pinned: true,
                  bottom: TabBar(
                    tabs: [
                      Tab(text: "Posts"),
                      Tab(text: "Likes"),
                    ],
                  ),
                  expandedHeight: 450,
                  flexibleSpace: FlexibleSpaceBar(
                    collapseMode: CollapseMode.pin,
                    background: Profile(),
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: [
                Container(
                  child: ListView.builder(
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 40,
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: Text('List Item $index'),
                      );
                    },
                  ),
                ),
                Container(
                  child: ListView.builder(
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 40,
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: Text('List Item $index'),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

स्क्रॉल करने से पहले:

Before scrolling

स्क्रॉल करने के बाद:

After scrolling

0
ArtS 5 सितंबर 2020, 06:41