J'utilise un SingleChildScrollView avec un Stack comme premier élément. La Stack contient deux conteneurs. Le second est positionné en bas: 0.0 en utilisant un Positionné .
J'ai fortement simplifié mon point de vue pour que cet article se concentre uniquement sur ce problème. Lorsque je fais défiler lentement, vous pouvez voir que le conteneur blanc est "pépin" et vous voyez une ligne qui est le bas du premier enfant de la pile.
Voici la vue:
Ce n'est pas ce qui se passe lorsque je fais défiler vers le bas, je n'ai aucune idée de la raison pour laquelle ça glitch comme ça:
View:[
class _HeaderComponentState extends State<HeaderComponent> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(height: 245.0, width: MediaQuery.of(context).size.width, color: Colors.red),
Positioned(bottom: 0.0, child: Container(height: 40.0, width:
MediaQuery.of(context).size.width, color: Colors.white)),
],
);
}
}
Composant Header
return Container(color: Colors.white, child: SingleChildScrollView(child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
HeaderComponent(),
Container(height: 600, width: MediaQuery.of(context).size.width)
]
)));
3 Réponses :
Je ne connais pas la cause profonde. Mais «bottom: 0.0» de Positoned apparaît un peu dans la couleur d'arrière-plan du conteneur supérieur pendant le défilement. Ainsi, lorsque je mets «bas: -0,2», ce problème ne se produit pas. Mais ça n'a pas l'air cool ...
class HeaderComponent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: 245.0,
width: MediaQuery.of(context).size.width,
color: Colors.red),
Positioned(
bottom: -0.2,
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width,
color: Colors.white)),
],
);
}
}
Je vois. Je viens d'essayer votre code, mais ce faisant, mon conteneur blanc apparaît au-dessus de la vue rouge, tout comme si j'avais spécifié top: 0.0 avec mon code précédent.
Oh désolé je vais le vérifier.
fais-moi savoir. Aussi oui je peux le réparer en mettant bottom: -0.02
'Positioned.fill' avec avant le code, il a le même symptôme .... hm ...
Je suggère une autre solution comme ci-dessous.
class HeaderComponent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 245.0,
child: Column(
children: <Widget>[
Expanded(
child: Container(
width: MediaQuery.of(context).size.width, color: Colors.red),
),
Container(
height: 40.0,
width: MediaQuery.of(context).size.width,
color: Colors.white)
],
),
);
}
}
Mais avec ce code, le deuxième conteneur ne sera pas au-dessus du premier? Ce sera ci-dessous?
Oui, le deuxième enfant sera en dessous. Voulez-vous laisser le deuxième enfant sur le premier enfant avec l'opacité? Si le deuxième enfant est sur le premier enfant sans opacité, je pense que c'est la même chose.
J'en ai besoin pour être au-dessus, c'est avec moi que j'utilisais une pile
Si c'est le cas, ajoutez simplement un remplissage inférieur 0,2 au premier enfant.
class HeaderComponent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: 245.0,
padding: EdgeInsets.only(bottom: 0.2),
width: MediaQuery.of(context).size.width,
color: Colors.red),
Positioned(
bottom: 0.0,
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width,
color: Colors.white)),
],
);
}
}
Cela fonctionne, mais c'est toujours une façon très pirate de le résoudre. Je me demande ce qui se passe du côté Flutter. Btw pour une meilleure lisibilité, il est préférable de publier une seule réponse que vous modifiez au fil du temps.