Débordement inférieur dû à la barre de navigation inférieure et à la barre d'onglets
@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
C'est parce que la hauteur du corps de NestedScrollView
est 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 SliverToBoxAdapter
ou SliverAppBar
pour le faire un ruban).
Ensuite, vous pouvez supprimer le widget Column
et Expand
au-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: [
...

La body
propriété de NestedScrollView
obtient 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 Column
widget avec une hauteur fixe (le TabBar
) widget. Ainsi, lorsque la contrainte de hauteur du corps devient plus petite que la TabBar
hauteur, 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 TabBar
vers 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;
}