J'essaie de rendre la disposition de la pile défilante en utilisant SingleChildScrollView mais ce n'est pas le défilement. Est-ce que SingleChildScrollView doit être utilisé ici?
Je pense avoir donné suffisamment de description pour que quiconque comprenne ma question. Plus de texte ici pour satisfaire l'exigence de StackOverflow de poser une question. Désolé pour ça.
Voici un exemple de code.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
child: Center(
child: LayoutBuilder(
builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
Container(
// A fixed-height child.
color: Colors.white,
height: 120.0,
),
Expanded(
// A flexible child that will grow to fit the viewport but
// still be at least as big as necessary to fit its contents.
child: Container(
color: Colors.blue,
//height: 120.0,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
color: Colors.red[100],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 50,
left: 0,
right: 0,
child: Container(
color: Colors.red[200],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 100,
left: 0,
right: 0,
child: Container(
color: Colors.red[300],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 150,
left: 0,
right: 0,
child: Container(
color: Colors.green[100],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 200,
left: 0,
right: 0,
child: Container(
color: Colors.green[200],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 250,
left: 0,
right: 0,
child: Container(
color: Colors.green[300],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 300,
left: 0,
right: 0,
child: Container(
color: Colors.yellow[100],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 350,
left: 0,
right: 0,
child: Container(
color: Colors.yellow[200],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 400,
left: 0,
right: 0,
child: Container(
color: Colors.yellow[300],
child: SizedBox(
height: 300,
),
),
),
],
),
),
),
],
),
),
),
);
},
),
),
),
),
);
}
3 Réponses :
Cela dépend de la taille du StackView. Par exemple, vous pouvez faire en sorte que l'un des enfants de Stack ne soit pas positionné. Cet enfant affectera alors la taille de la vue de la pile entière.
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 5000,
),
Positioned(
top: 100,
left: 100,
width: 1000,
height: 1000,
child: Container(color: Colors.red),
)
],
),
)
Stack obtiendra les contraintes du plus grand enfant. Mais si vous utilisez Position, les contraintes de cet enfant ne sont pas prises en compte par la pile. Si vous voulez une hauteur et une largeur dynamiques pour la pile, utilisez la marge à l'intérieur d'un conteneur au lieu de la position.
Pour expliquer plus en détail
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 500,
),
Container(margin: EdgeInsets.only(top: 100, left: 100, color: Colors.red, height: 1000, width: 1000),
],
),
)
Dans le cas ci-dessus, la pile ne prendra que 500 comme hauteur. Votre conteneur qui en a 1000 ne sera pas pris en compte.
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 500,
),
Positioned(
top: 100,
left: 100,
child: Container(color: Colors.red, height: 1000, width: 1000),
)
],
),
)
Dans le cas ci-dessus, la hauteur du conteneur sera utilisée pour définir la hauteur de pile. Cela permettra également à SingleChildScrollView d'être scrollable.
Voici comment vous pouvez le faire
Positioned(
top: 20.0,
left: 20.0,
right: 0.0,
bottom: 0.0,
child: SizedBox(
//what ever code is)),
)
)