Vin*_*han 22 scrollview dart flutter flutter-layout
我的页面代码是这样的.我需要在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,
)
])
],
),
);
}
我需要使身体部分可滚动.我该如何实现该滚动.如果存在任何自定义滚动方法.我尝试过Scrollable,SingleChildScrollView但没有满足我的需求.当我使用SinglechildScrollView它时发生错误BoxConstraints强制无限高度.如果我删除LayoutBuilder它会导致A RenderFlex overflowed by 22 pixels on the bottom错误
Jas*_*ngh 47
将您的小部件树包装在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
San*_*inh 16
在页面中添加滚动的两种方式
1. 使用 SingleChildScrollView ：
SingleChildScrollView(
child: Column(
children: [
Container(....),
SizedBox(...),
Container(...),
Text(....)
],
),
),
2. 使用 ListView : ListView 默认提供 Scroll 无需添加额外的滚动小部件
ListView(
children: [
Container(..),
SizedBox(..),
Container(...),
Text(..)
],
),
Vin*_*han 12
谢谢大家的帮助。根据您的建议，我达成了这样的解决方案。
new LayoutBuilder(
builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints:
BoxConstraints(minHeight: viewportConstraints.maxHeight),
child: Column(children: [
// remaining stuffs
]),
),
);
},
)
小智 6
您可以使用这个，它是最佳实践。
Run Code Online (Sandbox Code Playgroud)SingleChildScrollView( child: Column( children: <Widget>[ //Your Widgets //Your Widgets, //Your Widgets ], ), );
你可以试试看CustomScrollView。将您的CustomScrollView放在Column Widget中。
仅举例来说-
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,
),
),
),
],
),
),
],
)),
);
}
}
在上面的代码中，我在CustomScrollView中显示项目列表（共5个）。
YourRowWidget小部件被渲染5次作为列表项。通常，您应该根据一些数据来渲染每一行。
您可以删除Container小部件的装饰属性，它仅用于提供背景图像。
小智 5
如果您已经在使用 statelessWidget，那么非常简单 查看我的代码
class _MyThirdPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Understanding Material-Cards'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_buildStack(),
_buildCard(),
SingleCard(),
_inkwellCard()
],
)),
);
}
}