Comment faire défiler la page en flottant
Mon code pour une page est comme ça. J'ai besoin de faire défiler la partie ci-dessous appbar.
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(... ),
body: new Stack(
children: <Widget>[
new Container(
decoration: BoxDecoration(
image: DecorationImage(...),
new Column(children: [
new Container(...),
new Container(...... ),
new Padding(
child: SizedBox(
child: RaisedButton(..),
),
new Divider(),
new Column(
children: <Widget>[
new Container(
child: new Row(
children: <Widget>[
new Expanded(
child: new Text( ),
),
new IconButton(
icon: IconButton(..),
onPressed: () {
_changed(true, "type");
},
),
],
),
),
visibilityPropertyType
? new Container(
margin: EdgeInsets.all(24.0),
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(... ),
new RaisedButton(..)
],
),
new Padding(
padding: const EdgeInsets.only(top: 10.0),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
new Row(
children: <Widget>[.. ]),
new Row(
children: <Widget>[]),
new Row(
children: <Widget>[]),
new Row(
children: <Widget>[],
),
new Column(
children: <Widget>[
new Row(
children: <Widget>[],
),
],
),
],
),
),
],
))
: new Container(),
],
),
new Divider(
color: Colors.white,
)
])
],
),
);
}
J'ai besoin de faire défiler une partie du corps. Comment puis-je mettre en œuvre ce parchemin. S'il existe une méthode de défilement personnalisée existante. J'ai essayé Scrollable et SingleChildScrollView mais je ne réponds pas à mes besoins. Lorsque j’utilise SinglechildScrollView, une erreur BoxConstraints s’efforce de forcer une hauteur infinie. si j'ai supprimé LayoutBuilder, cela provoque une erreur RenderFlex overflowed by 22 pixels on the bottom
Enveloppez votre arborescence de widgets dans un SingleChildScrollView
body: SingleChildScrollView(
child: Stack(
children: <Widget>[
new Container(
decoration: BoxDecoration(
image: DecorationImage(...),
new Column(children: [
new Container(...),
new Container(...... ),
new Padding(
child: SizedBox(
child: RaisedButton(..),
),
....
...
); // Single child scroll view
Merci les gars pour l'aide. De vos suggestions, j'ai trouvé une solution comme celle-ci.
new LayoutBuilder(
builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints:
BoxConstraints(minHeight: viewportConstraints.maxHeight),
child: Column(children: [
// remaining stuffs
]),
),
);
},
)
Vous pouvez essayer CustomScrollView. Placez votre CustomScrollView dans le widget de colonne.
Juste par exemple -
class App extends StatelessWidget {
App({Key key}): super(key: key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: const Text('AppBar'),
),
body: new Container(
constraints: BoxConstraints.expand(),
decoration: new BoxDecoration(
image: new DecorationImage(
alignment: Alignment.topLeft,
image: new AssetImage('images/main-bg.png'),
fit: BoxFit.cover,
)
),
child: new Column(
children: <Widget>[
Expanded(
child: new CustomScrollView(
scrollDirection: Axis.vertical,
shrinkWrap: false,
slivers: <Widget>[
new SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 0.0),
sliver: new SliverList(
delegate: new SliverChildBuilderDelegate(
(context, index) => new YourRowWidget(),
childCount: 5,
),
),
),
],
),
),
],
)),
);
}
}
Dans le code ci-dessus, j'affiche une liste d'éléments (total 5) dans CustomScrollView. Le widget YourRowWidget est rendu 5 fois sous forme d'élément de liste. Généralement, vous devez rendre chaque ligne en fonction de certaines données.
Vous pouvez supprimer la propriété de décoration du widget Conteneur, elle sert uniquement à fournir une image d'arrière-plan.