Débordement inférieur dû à la barre de navigation inférieure et à la barre d'onglets

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

}


Ci-dessus, l'exemple d'erreur que
j'obtiens: un RenderFlex a débordé de 48 pixels en bas.
Comment résoudre ce problème? J'ai essayé d'utiliser développé sur TabBar et de donner un flex de 1 à la barre d'onglets et un flex de 10 à tabView, mais avec cette barre d'onglets se rétrécit lors du défilement vers le bas.


Voici ci-dessous le code pour les vues tabBar A et B est même similaire

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

Réponses

2 yellowgray Dec 29 2020 at 15:51

C'est parce que la hauteur du corps de NestedScrollViewest comprise entre 0 et MediaQuery.of (contexte) .size.height, tandis que votre TabBar à l'intérieur de la colonne en fait une mise en page d'une hauteur minimale de TabBar.

Déplacer TabBar dans le générateur

Dans l'exemple de NestedScrollView , vous pouvez voir que TabBar est à l'intérieur de headerSliverBuilder. Vous pouvez simplement déplacer la TabBar à l' intérieur (envelopper un SliverToBoxAdapterou SliverAppBarpour le faire un ruban).

Ensuite, vous pouvez supprimer le widget Columnet Expandau-dessus de 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

La bodypropriété de NestedScrollViewobtient une contrainte de hauteur serrée égale à l'espace laissé par headerSliverBuilder(compte tenu de la position de défilement). Dans votre code, vous avez comme corps un Columnwidget avec une hauteur fixe (le TabBar) widget. Ainsi, lorsque la contrainte de hauteur du corps devient plus petite que la TabBarhauteur, elle débordera le Column.

Donc body, il doit y avoir un widget qui peut se réduire à zéro, probablement un scrollable ( ListView, CustomScrollView). Dans votre cas, vous pouvez déplacer le TabBarvers le bas de headerSliverBuilder, en l'enveloppant avec:

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

utilisant:

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