Overflow bawah karena bilah navigasi bawah dan bilah tab

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()
                ],
              ),
                ),
              ],
            ),
          ),),
      ),

}


Di atas adalah contoh kesalahan yang saya dapatkan
kesalahan: RenderFlex meluap sebesar 48 piksel di bagian bawah.
Bagaimana cara mengatasi masalah ini? Mencoba menggunakan diperluas pada TabBar dan memberikan kelenturan 1 ke bilah tab dan kelenturan 10 ke tabView, tetapi dengan bilah tab itu menyusut saat menggulir ke bawah.


Berikut dibawah ini adalah kode untuk tampilan tabBar A dan B bahkan mirip

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

Jawaban

2 yellowgray Dec 29 2020 at 15:51

Itu karena tinggi badan NestedScrollViewadalah dari 0 ke MediaQuery.of (konteks) .size.height, sedangkan TabBar Anda di dalam kolom membuatnya tata letak ketinggian minimal TabBar.

Pindahkan TabBar di dalam pembangun

Dari contoh NestedScrollView , Anda dapat melihat TabBar ada di dalam headerSliverBuilder. Anda cukup memindahkan TabBar di dalamnya (membungkus SliverToBoxAdapteratau SliverAppBarmembuatnya menjadi sliver).

Kemudian Anda dapat menghapus Columndan ExpandWidget di atas TabBarView

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

The bodymilik NestedScrollViewmendapat kendala ketinggian ketat sama dengan ruang yang tersisa dengan headerSliverBuilder(mengingat posisi scroll). Dalam kode Anda, Anda sebagai isi Columnwidget dengan tinggi tetap TabBarwidget di sana. Jadi ketika batasan tinggi badan menjadi lebih kecil dari TabBarketinggian, itu akan meluap Column.

Jadi di bodydalamnya, harus ada widget yang bisa menyusut ke ketinggian nol, kemungkinan besar scrollable ( ListView, CustomScrollView). Dalam kasus Anda, Anda dapat memindahkan TabBarke bagian bawah headerSliverBuilder, membungkusnya dengan:

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

menggunakan:

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;
}