我正在尝试创建一个基本的Flutter应用程序,它有一个2乘2的文本输入网格和一个下面的按钮。
最初,我只有网格和没有按钮没有问题:
void main() => runApp(new App());
class App extends StatelessWidget {
...
Widget build(BuildContext context) {
return new MaterialApp(
...
home: new InputWidget()
...
class InputWidget extends StatefulWidget {
Widget build(BuildContext context) {
...
_InputWidgetState createState() => new _InputWidgetState();
...
class _InputWidgetState extends State<InputWidget> {
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(...)
body: new Builder(
builder: (BuildContext context) {
return new GridView.count(
children: <Widget>[
// 4 Text Fields here
]
我需要Scaffold内部的GridView能够使用Scaffold作为零食吧。
现在我想在这个网格下面添加一个按钮。为了达到这个目的,我在它们之间添加了几层,并且我得到了一个“溢出无穷大”的错误,其中包含以下逻辑:
void main() => runApp(new App());
class App extends StatelessWidget {
...
Widget build(BuildContext context) {
return new MaterialApp(
...
home: new AppContainer()
...
class AppContainer extends StatelessWidget {
Widget build(BuildCOntext context) {
return new Material( // tried Container as well
child: new Column(
children: <Widget>[
new InputWidget()
new BUttonWidget()
...
class ButtonWidget extends StatelessWidget {
Widget build(BuildContext context) {
return new Container(
child: new MaterialButton(...)
...
class InputWidget extends StatefulWidget {
Widget build(BuildContext context) {
...
_InputWidgetState createState() => new _InputWidgetState();
...
class _InputWidgetState extends State<InputWidget> {
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(...)
body: new Builder(
builder: (BuildContext context) {
return new GridView.count(
children: <Widget>[
// 4 Text Fields here
]
问题似乎源于“专栏”部分。好像我需要为Column或Scaffold提供一些尺寸,但我似乎无法弄清楚我缺少哪些参数。
我在SO或Flutter文档上找不到任何可以遵循的示例 - 或者我完全错过了它。
非常感谢能够对这个布局进行排序的任何指针。
得到了Flutter Gitter的帮助,感谢@xqwzts和@ahmadzein。
解决方案是将每个孩子都包裹在“Expanded”中
void main() => runApp(new App());
class App extends StatelessWidget {
...
Widget build(BuildContext context) {
return new MaterialApp(
...
home: new AppContainer()
...
class AppContainer extends StatelessWidget {
Widget build(BuildCOntext context) {
return new Material( // tried Container as well
child: new Column(
children: <Widget>[
new Expanded (
child: new InputWidget() ... ),
new Expanded (
child: new Row (
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[new ButtonWidget()] ... )
...
class ButtonWidget extends StatelessWidget {
Widget build(BuildContext context) {
return new Container(
child: new MaterialButton(...)
...
class InputWidget extends StatefulWidget {
Widget build(BuildContext context) {
...
_InputWidgetState createState() => new _InputWidgetState();
...
class _InputWidgetState extends State<InputWidget> {
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(...)
body: new Builder(
builder: (BuildContext context) {
return new GridView.count(
children: <Widget>[
// 4 Text Fields here
]