我创建了一个适合列的屏幕,但由于键盘我需要滚动。
当您插入SingleChildScrollView
或ListView
属性MainAxisAlignment.spaceBetween
时,它将不再有效。
有没有解决方案?
没有SingleChildScrollView
屏幕的Gif不会滚动而FloatingActionButton
位于屏幕底部
屏幕显示为SingleChildScrollView
的Gif,而FloatingActionButton
不在屏幕下方
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
child: new Column(
children: <Widget>[
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
],
)
),
new Container(
margin: new EdgeInsets.only(bottom: 16.0),
child: new FloatingActionButton(
backgroundColor: new Color(0xFFE57373),
child: new Icon(Icons.check),
onPressed: (){}
),
)
],
),
)
);
}
}
答案 0 :(得分:3)
我建议不要像你在这里一样使用FloatingActionButton
。 FloatingActionButton
应该用于始终需要始终在屏幕上的操作。有关可以滚动的其他按钮类型的建议,请参阅Material guidelines on button usage,例如RaisedButton
和FlatButton
。你可以在这里使用RaisedButton
,但我认为最好让你的屏幕成为一个对话框,并将保存操作放在AppBar
中作为我suggested的另一个问题。
如果您决定使用RaisedButton
或FlatButton
,请记住,滚动条通常不会根据容器的大小更改其项目间距。您可以在MainAxisAlignment.spaceBetween
周围放置一些Padding
,而不是使用RaisedButton
元素,而不是TextField
元素。无论旋转,屏幕尺寸如何,无论键盘是否已启动,这都将确保它们间隔相同的距离。
答案 1 :(得分:1)
按照以下代码注册。
MainAxisAlignment.spaceBetween
已替换为动态填充,具体取决于屏幕尺寸。
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final ui.Size logicalSize = MediaQuery.of(context).size;
final double _height = logicalSize.height;
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new SingleChildScrollView(
child: new Column(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 300.0,
child: new Column(
children: <Widget>[
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
],
)
),
new Container(
padding: new EdgeInsets.only(top: (_height - 450.0)),
margin: new EdgeInsets.only(bottom: 16.0),
child: new FloatingActionButton(
backgroundColor: new Color(0xFFE57373),
child: new Icon(Icons.check),
onPressed: (){}
),
)
],
),
)
);
}
}