J'essaie de créer un SingleChildScrollView avec une colonne dedans, et j'aimerais qu'un bouton soit tout en bas de l'écran. Pour ce faire, j'essaie d'utiliser une pile avec le SingleChildScrollView et FlatButton comme enfants. Voici ce que je finis par:
Je n'arrive pas à faire en sorte que le bouton reste en bas, même si j'ai positionné le bouton et l'avoir aligné vers le bas. Le vert est juste pour montrer la hauteur de la colonne et que le bouton est collé contre le bas de la colonne. Stack, SingleChildScrollView, Column et FlatButton ne prennent que l'espace nécessaire à leur affichage. Je dois coller ce bouton au bas de l'écran.
C'est le code que j'utilise pour créer ceci. Qu'est-ce que je rate?
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Container(
width: double.infinity,
color: Colors.red,
child: Stack(
children: <Widget>[
Container(
color: Colors.green,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
child: TextField(
decoration: InputDecoration(
labelText: 'Protein',
),
),
margin: EdgeInsets.only(left: 20, right: 20),
),
Container(
child: TextField(
decoration: InputDecoration(
labelText: 'Fat',
),
),
margin: EdgeInsets.only(left: 20, right: 20),
),
Container(
child: TextField(
decoration: InputDecoration(
labelText: 'Fiber',
),
),
margin: EdgeInsets.only(left: 20, right: 20),
),
Container(
child: TextField(
decoration: InputDecoration(
labelText: 'Moisture',
),
),
margin: EdgeInsets.only(left: 20, right: 20),
),
Container(
child: TextField(
decoration: InputDecoration(
labelText: 'Ash',
),
),
margin: EdgeInsets.only(left: 20, right: 20),
),
],
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Align(
alignment: Alignment.bottomCenter,
child: ButtonTheme(
minWidth: double.infinity,
height: 50,
child: FlatButton(
color: Colors.blueAccent.shade400,
onPressed: () {},
child: Text(
'Calculate Carbs',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
),
),
)
],
),
),
);
Modifier: les deux méthodes indiquées ci-dessous permettent d'agrandir la pile afin qu'elle remplisse tout l'écran. J'ai ajouté des widgets TextField supplémentaires pour remplir l'écran, puis j'ai cliqué sur celui du bas pour m'assurer que le widget du bas serait visible lorsque le clavier était ouvert et j'ai remarqué que le bouton couvrait le champ du bas. C'est comme si la vue de défilement faisait défiler le montant correct en ignorant qu'il y avait un bouton là-bas.
Dans les images ci-dessous, j'ai tapoté sur le widget End Field 3. Le bouton le recouvre pour que je ne puisse pas voir ce que j'entre dans le champ.
3 Réponses :
ajoutez ce paramètre à la pile: fit: StackFit.expand,
Option 1 avec bouton d'action flottant
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(),
),
bottomNavigationBar: YourButtonWidget(),
);
}
Option 2 avec la barre de navigation inférieure
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(),
),
floatingActionButton: YourButtonWidget(),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
);
}
La raison d'un tel comportement est la taille du conteneur parent. Changez simplement la taille du conteneur
/// By default, the non-positioned children of the stack are aligned by their /// top left corners.
et vous avez terminé.
Explication, si vous êtes curieux :) Si nous regardons le widget Stack, nous pouvons trouver cette description
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.red,
child: Stack(
children: <Widget>[
Donc, ce widget ne prend que cet espace, qui a été donné par le widget parent. Et vous avez utilisé le conteneur sans taille. Tous les widgets enfants ont pris leur place automatiquement et Alin a travaillé à l'intérieur de ce conteneur créé automatiquement.
vous avez probablement déjà résolu cela, mais juste au cas où, vous pouvez utiliser `resizeToAvoidBottomInset: false` sur votre échafaudage pour éviter cela
Comment avez-vous résolu cela? Je lutte avec le même problème. La définition de la hauteur interrompt manuellement le défilement sur les entrées de texte