底部導航欄和標簽欄導致底部溢出

Question

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

}

以上是我得到的錯誤示例
錯誤：RenderFlex 在底部溢出 48 個像素。
如何解決這個問題？ 嘗試在 TabBar 上使用 expanded 並將 flex 設置為 1 到 tab bar，將 flex 設置為 10 到 tabView，但隨着該選項卡欄在向下滾動時縮小。

下面是 tabBar 視圖 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, ), )), ); } }

Answer 1

這是因為NestedScrollView的 body 高度是從 0 到 MediaQuery.of(context).size.height，而你的TabBar列在里面讓它布局了 TabBar 的最小高度。

在構建器內移動 TabBar

以NestedScrollView 為例，可以看到 TabBar 在 headerSliverBuilder 內部。 您可以簡單地將TabBar移動到其中（包裝SliverToBoxAdapter或SliverAppBar使其變細）。

然后您可以刪除TabBarView上方的Column和Expand Widget

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: [
     ...
  

Answer 2

NestedScrollView的body屬性獲得了一個緊密的高度約束，等於headerSliverBuilder留下的空間（考慮到滾動位置）。 在您的代碼中，您有一個具有固定高度（ TabBar ）小部件的Column小部件作為主體。 所以當 body 的高度約束小於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;
}

Answer 3

請參閱 SingleChildScrollView class，擴展內容以適合視口：

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html