颤振 - 响应高度形式

Question

我有这个简单的表单，带有文本区域和按钮：

当我打开键盘时，我想减小文本区域的大小，就像响应式布局一样。如果我关闭键盘，textarea 应该会填满剩余的可用屏幕空间。

想要的效果：打开/激活键盘

想要的效果：关闭/没有键盘

我的目的是让组件填满屏幕，不管设备分辨率。

有人可以提供一个有效的例子吗？我尝试了几种实现，但都无法达到预期的效果。

更新：

我当前的屏幕代码：

new MaterialPageRoute(
  builder: (context) {
    return new Scaffold(
    resizeToAvoidBottomPadding: true,
    appBar: new AppBar(
      title: new Text('Add new Grocery List'),
      actions: <Widget>[
        new IconButton(
          icon: new Icon(Icons.delete),
          tooltip: 'Clear Grocery List',
          onPressed: () {
            this._promptRemoveGroceryBatchList();
          },
        ),
      ]
    ),
    body: new Container(
      padding: const EdgeInsets.all(5.0),
      child: new Form(
      key: this._formGroceryBatchAdd,
      child: new ListView(
        children: <Widget>[
        new Container(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new TextFormField(
                maxLines: 10,
                autofocus: true,
                decoration: new InputDecoration(
                  labelText: 'Item List',
                  hintText: 'Enter a grocery list',
                  contentPadding: const EdgeInsets.all(16.0)
                ),
                validator: (value) {
                  if (value.isEmpty) {
                  return 'Please enter at least one grocery item';
                  }
                },
                onSaved: (value) {
                  this._formBatchGroceryData = value;
                },
              ),
              new Padding(
                padding: new EdgeInsets.all(8.0),
                child: new Text(
                  'One item per line. Use ":" to specifcy the amount.\n' +
                  'Example:\n' +
                  'Potatoes:12\n' +
                  'Tomatoes:6',
                  style: new TextStyle(fontSize: 12.0, color: Colors.black54),
                ),
              ),
            ],
          ),
        ),
        new Container(
          child: new ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new RaisedButton(
              child: new Text('Add Items'),
              color: Theme.of(context).primaryColor,
              textColor: Colors.white,
              elevation: 4.0,
              onPressed: () {
                // ACTION GOES HERE
              },
            ),
            new RaisedButton(
              child: new Text('Cancel'),
              onPressed: () {
                // ACTION GOES HERE
              },
            ),
          ] 
          ),
        ),
        ]
      )
      );
    )
    );
  }
)

Answer 1

恐怕不能直接使用 TextField 作为 textarea 来完成，因为它的大小取决于您拥有的文本行数。

但是您可以通过将TextField 包围起来来模拟它，该TextField 允许使用Container 无限行。

这是一个适合您的示例：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Demo Home Page'),
      ),
      body: new Column(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(),
                  borderRadius: BorderRadius.circular(4.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(
                      left: 10.0, bottom: 20.0, right: 10.0),
                  child: new TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}