我的页面代码是这样的。我需要在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，则会导致RenderFlex overflowed by 22 pixels on the bottom错误
答案 0 :(得分：17)
将小部件树包装在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
答案 1 :(得分：5)
感谢大家的帮助。根据您的建议，我达成了这样的解决方案。
new LayoutBuilder(
builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints:
BoxConstraints(minHeight: viewportConstraints.maxHeight),
child: Column(children: [
// remaining stuffs
]),
),
);
},
)
答案 2 :(得分：4)
您可以尝试CustomScrollView。将您的CustomScrollView放在“列小部件”中。
例如-
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小部件的装饰属性，仅用于提供背景图像。
答案 3 :(得分：1)
您可以使用此方法，这是最佳做法。
SingleChildScrollView( child: Column( children: <Widget>[ //Your Widgets //Your Widgets, //Your Widgets ], ), );
答案 4 :(得分：0)
1。使用SingleChildScrollView：
SingleChildScrollView(
child: Column(
children: [
Container(....),
SizedBox(...),
Container(...),
Text(....)
],
),
),
2。使用ListView：默认情况下，ListView提供了Scroll，无需添加额外的滚动小部件
ListView(
children: [
Container(..),
SizedBox(..),
Container(...),
Text(..)
],
),
答案 5 :(得分：0)
此举可能会对您有所帮助。
class ScrollView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new LayoutBuilder(
builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: viewportConstraints.maxHeight),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Hello world!!"),
//You can add another children
]),
),
);
},
);
}
}
答案 6 :(得分：0)
您可以通过两种方式滚动内容的任何部分...
大多数情况下，当特定屏幕上有键盘提示时，我总是直接使用列表视图，以使内容不会被键盘重叠，甚至会滚动到顶部...。
此技巧将多次有用。...
答案 7 :(得分：0)
如果您已经在使用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()
],
)),
);
}
}
答案 8 :(得分：0)
使用LayoutBuilder并获取所需的输出
用SingleChildScrollView将LayoutBuilder包裹起来并实现Builder函数。
我们可以使用LayoutBuilder来获得contains框或可用空间。
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints){
return SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: constraints.maxHeight,
),
topTitle(context),
middleView(context),
bottomView(context),
],
),
);
}
)