नीचे नेविगेशन बार और टैब बार के कारण निचला अतिप्रवाह

Dec 24 2020
@override
  Widget build(BuildContext context) {
    super.build(context);

    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(
     key: _scaffoldKeyProfilePage,

      body: DefaultTabController(
        length: 2,
 child:RefreshIndicator(
          onRefresh: _onRefresh,
        child: NestedScrollView(
          
            headerSliverBuilder: (context, _) {
              return [
                SliverList(
                delegate: SliverChildListDelegate(
                 [                 BuildMainProfile(
              ....//
                 ),
                 Padding(
                ...//another design 
                 ), 
                
              ];
            },
            // You tab view goes here
            body: Column(
              children: <Widget>[
                TabBar(
              tabs: [
                Tab(text: 'A'),
                Tab(text: 'B'),
              ],
                ),
                Expanded(
              child: TabBarView(
                children: [
                  BuildPost(,

                  ),
                 BuildWings()
                ],
              ),
                ),
              ],
            ),
          ),),
      ),

}


ऊपर त्रुटि का उदाहरण है जिसे मुझे
त्रुटि मिल रही है: नीचे की ओर 48 पिक्सल द्वारा एक रेंडरफ्लेक्स ओवरफ्लो हुआ।
इस समस्या को कैसे हल करें? टैबबार पर विस्तारित का उपयोग करने की कोशिश की और 1 से टैब बार का फ्लेक्स और टैब के 10 का फ्लेक्स दिया गया, लेकिन इसके साथ टैब बार स्क्रॉलिंग पर सिकुड़ जाता है।


यहाँ नीचे tabBar view A और B का कोड समान है

class BuildPost extends StatefulWidget {
  final String uid;

  const BuildPost({
    Key key,
    @required this.uid,
  }) : super(key: key);
  @override
  _BuildPostState createState() => _BuildPostState();
}

class _BuildPostState extends State<BuildPost> {
  List<Post> _post = [];

  getUsersPost() async {
    final database = FirestoreDatabase();
    List<Post> _postModel = await database.getUsersPost(widget.uid);
    setState(() {
      _post = _postModel.toList();
    });
  }

  @override
  void initState() {
    getUsersPost();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _post.isEmpty
        ? Container(
            height: 500,
            width: double.infinity,
          )
        : GestureDetector(
            child: Directionality(
                textDirection: TextDirection.ltr,
                child: AnimationLimiter(
                  child: StaggeredGridView.countBuilder(
                    padding: EdgeInsets.all(10),
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    crossAxisCount: 3,
                    itemCount: _post.length,
                    itemBuilder: (context, index) {
                      return AnimationConfiguration.staggeredGrid(
                        position: index,
                        duration: const Duration(milliseconds: 500),
                        columnCount: 3,
                        child: SlideAnimation(
                          verticalOffset: 50.0,
                          child: FadeInAnimation(
                              duration: Duration(milliseconds: 1000),
                              child: BuildData(
                                totalPost: _post.length,
                                postList: _post,
                                index: index,
                                post: _post[index],
                              )),
                        ),
                      );
                    },
                    staggeredTileBuilder: (index) => StaggeredTile.count(
                        index % 7 == 0 ? 2 : 1,
                        index % 7 == 0 ? (2.1) : (1.05)),
                    mainAxisSpacing: 4.0,
                    crossAxisSpacing: 4.0,
                  ),
                )),
          );
  }
}

जवाब

2 yellowgray Dec 29 2020 at 15:51

ऐसा इसलिए है क्योंकि के शरीर की ऊंचाई NestedScrollView, 0 से MediaQuery.of (संदर्भ) .size.height है, जबकि अपनी TabBar स्तंभ मेकअप के अंदर यह TabBar का एक न्यूनतम ऊंचाई लेआउट।

बिल्डर के अंदर TabBar ले जाएँ

NestedScrollView का उदाहरण देखें, आप देख सकते हैं कि TabBar हैडर के अंदर है। आप बस इसके अंदर TabBar को स्थानांतरित कर सकते हैं (इसे पतला बनाने के लिए लपेटें SliverToBoxAdapterया एक SliverAppBar)।

तब आप TabBarView के ऊपर Columnऔर Expandविजेट को हटा सकते हैं

child: NestedScrollView(
  headerSliverBuilder: (context, _) {
    return [
      SliverList( 
       ...
      ),
      SliverAppBar(
        pinned: true,
        primary: false,  // no reserve space for status bar
        toolbarHeight: 0,  // title height = 0
        bottom: TabBar(
          tabs: [
            Tab(text: 'A'),
            Tab(text: 'B'),
          ],
        ),
      )
    ];
  }
  body: TabBarView(
    children: [
     ...
  

1 spkersten Dec 26 2020 at 20:45

bodyकी संपत्ति NestedScrollViewएक तंग ऊंचाई बाधा अंतरिक्ष से बचे के बराबर हो जाता है headerSliverBuilder(पुस्तक स्थिति पर विचार)। आपके कोड में, आप Columnएक निश्चित ऊँचाई ( TabBar) में विजेट के साथ एक निकाय के रूप में हैं। इसलिए जब शरीर की ऊँचाई की सीमा ऊँचाई से छोटी हो जाती है TabBar, तो यह बह निकलेगी Column

तो body, वहाँ एक विजेट होना चाहिए जो शून्य ऊंचाई तक सिकुड़ सकता है, सबसे अधिक संभावना है कि एक स्क्रॉल करने योग्य ( ListView, CustomScrollView)। अपने मामले में, आप इसे TabBarनीचे की ओर ले जा सकते हैं headerSliverBuilder, इसे इसके साथ लपेटकर:

SliverPersistentHeader(
  pinned: true,
  delegate: SimpleHeaderDelegate(
    child: TabBar(...),
  ),
)

का उपयोग कर:

class SimpleHeaderDelegate extends SliverPersistentHeaderDelegate {
  SimpleHeaderDelegate({@required this.child});

  final PreferredSizeWidget child;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => child;

  @override
  double get maxExtent => child.preferredSize.height;

  @override
  double get minExtent => child.preferredSize.height;

  @override
  bool shouldRebuild(covariant SimpleHeaderDelegate oldDelegate) => oldDelegate.child != child;
}