Flutter-如何使列屏幕可滚动
Kin*_*ics 9 android dart flutter
我正在使用登录屏幕构建一个Flutter应用程序。专注于文本字段，屏幕溢出，并且我无法滚动。我已经尝试过使用ListView.builder，但是这只会产生renderBox错误，而常规按钮ListView无法正常工作
小部件的结构是这样的
-scafold
- body
- container
- column
- form
- column
- textInput
- textInput
- container
- container
- row
- raisedButton
先感谢您 ！！
Cop*_*oad 39
有两种简单的方法可以做到。
把你
Column的SingleChildScrollView
Run Code Online (Sandbox Code Playgroud)SingleChildScrollView( child: Column( children: [ Text('First'), //... other children Text('Last'), ], ), )使用
ListView代替Column。
Run Code Online (Sandbox Code Playgroud)ListView( children: [ Text('First'), //... other children Text('Last'), ], )这种方法使用起来很简单，但是您会失去 提供的功能
crossAxisAlignment和其他好处Column，在这种情况下，您可以将子小部件包装在里面Align并设置对齐属性。
现在您可能有可进一步滚动的嵌套子项，在这种情况下，您需要为您的子项提供固定高度，您可以使用SizedBox它，就是这样。
例如：
ListView(
children: [
Text('First'),
SizedBox(
height: 100,
child: ListView(...), // nested ScrollView
),
Text('Last'),
],
)
- 对我来说最完整、最容易理解的答案。 (3认同)
- 使用“SingleChildScrollView”应该是实现这一目标的公认且标准的方法。 (2认同)
anm*_*ail 14
试试下面的代码：它使用ListView
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.all(15.0),
children: <Widget>[
Center(
child: Card(
elevation: 8.0,
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "Username or Email",
),
),
SizedBox(
height: 15.0,
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "Password",
),
),
SizedBox(
height: 15.0,
),
Material(
borderRadius: BorderRadius.circular(30.0),
//elevation: 5.0,
child: MaterialButton(
onPressed: () => {},
minWidth: 150.0,
height: 50.0,
color: Color(0xFF179CDF),
child: Text(
"LOGIN",
style: TextStyle(
fontSize: 16.0,
color: Colors.white,
),
),
),
)
],
),
),
),
),
SizedBox(
height: 25.0,
),
Row(
children: <Widget>[
Expanded(child: Text("Don't Have a Account?")),
Text("Sign Up",
style: TextStyle(
color: Colors.blue,
)),
],
),
],
),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: RaisedButton(
padding: EdgeInsets.all(15.0),
onPressed: () {},
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
32.0,
),
side: BorderSide(color: Color(0xFF179CDF))),
child: Text(
"SKIP SIGN UP FOR NOW",
style:
TextStyle(fontSize: 18.0, color: Color(0xFF179CDF)),
),
)),
],
),
),
);
}
}
- `shrinkWrap: true` 是这个详尽答案中唯一重要的事情 (8认同)
Rob*_*don 14
该ListView解决方案应该可以工作，但是在编写本文时，它会遭受此处列出的崩溃的困扰。避免发生崩溃的另一种方法是使用SingleChildScrollView：
return new Container(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);
- 当我想要滚动的列嵌套在另一列中时，此方法对我不起作用。它适用于滚动最外层的列。 (7认同)
Pan*_*n05 11
我们可以使用扩展小部件。它将添加滚动。
return new Expanded(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);
- 这里最主要的不是展开视图而是滚动视图。 (5认同)
当我们必须在屏幕上垂直列出小部件并且SingleChildScrollView小部件为Column小部件提供滚动功能时，将使用该列。
当我们使用SingleChildScrollView + Column 时，即使只有少数项目可见，也会呈现整个项目列表。
所以对于具有少量项目的复杂布局，性能提升可能不值得麻烦，在这种情况下我们可以使用SingleChildScrollView。
使用SingleChildScrollViewwithColumns使您的屏幕可滚动，您可以使您的布局如上
几个优点：
- 当需要具有滚动功能的不同小部件时，这将非常有用。
- 对于复杂的布局，当项目较少且性能不佳时，我们可以使用它（就像每个其他小部件都需要一些与其他小部件不同的修改时一样）
这是你怎么做的
class MyHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
bottom: false,
child: Container(
padding: EdgeInsets.only(left: 15, right: 15),
height: double.infinity,
width: double.infinity,
child: SingleChildScrollView(
padding: EdgeInsets.only(bottom: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200.0,
),
Card(
elevation: 8.0,
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "Username or Email",
),
),
SizedBox(
height: 15.0,
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "Password",
),
),
SizedBox(
height: 30.0,
),
MaterialButton(
height: 50.0,
elevation: 5,
minWidth: 300,
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Theme.of(context).primaryColor,
disabledColor: Theme.of(context)
.primaryColor
.withOpacity(0.50),
disabledElevation: 0,
child: Text('SIGN IN',
textAlign: TextAlign.center, style: TextStyle(color: Colors.white),))
],
),
),
),
SizedBox(
height: 25.0,
),
Row(
children: <Widget>[
Expanded(child: Text("Don't Have a Account?")),
Text("Sign Up",
style: TextStyle(
color: Colors.blue,
)),
],
),
SizedBox(
height: 50.0,
),
Align(
alignment: Alignment.bottomCenter,
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
Text(
'New to App?',
style: TextStyle(color: Colors.black87),
),
SizedBox(
width: 5,
),
GestureDetector(
onTap: () {
},
child: Text(
"REGISTER", style: TextStyle(
color: Colors.blue,
)
),
),
]),
)
],
)),
),
));
}
}
如果您有嵌套列，请使用以下解决方案
Expanded -> SingleChildScrollView -> Column
这是解决方案：
OnboardingScaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Center(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
...,
...
],
),
),
),
)
],
),
);
| 归档时间： |
|
| 查看次数： |
14234 次 |
| 最近记录： |