Question

我建立了一个https://github.com/flutter/flutter/issues/9365中建议的滚动文本字段。现在，根据显示或未显示的键盘，我希望ConstrainedBox的maxHeight动态更改。有没有办法做到这一点？

Widget _buildTextInput() {
 return new Container(
  padding: new EdgeInsets.all(7.0),
  child: new ConstrainedBox(
    constraints: new BoxConstraints(
      maxHeight: 150.0 <-- This should be dynamic
    ),

    child: new SingleChildScrollView(
      scrollDirection: Axis.vertical,
      reverse: true,

      // here's the actual text box
      child: new TextField(
        keyboardType: TextInputType.multiline,
        maxLines: null, //grow automatically
        decoration: new InputDecoration.collapsed(
            hintText: 'Please enter a lot of text',
        ),
      ),
    ),
  ),
 );
}

The red box should be the constrained box with open keyboard.

And like so with a closed keyboard.

编辑： 我正在尝试建立一个类似于在Twitter上发布的输入字段。我需要结合使用CircleAvatar，TextField和GridView来显示用户的头像，他的帖子和一些图像。像在Twitter上一样，我希望整个页面不仅滚动TextField-在键入时以及在查看用户键入或上传的内容时都可以滚动。此外，（多行）TextField应该在可见区域中键入时滚动（牢记打开或关闭的键盘），以便用户可以看到他正在键入的内容。

即使Flutter TextField现在可以自动滚动，但我无法使整个群集正常工作。任何想法？

Answer 1

自从我相信6月初（2018）以来，textfield小部件中就已自动支持自动滚动-我认为this is the commit已添加它。您可能需要更新到最新的flutter版本，它才能正常工作，但这已包含在5.5版中。

这简化了一些事情-这应该是您需要做的一切，以使其按需运行：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Example"),
        ),
        body: new Container(
          padding: new EdgeInsets.all(7.0),
          child: new TextField(
            keyboardType: TextInputType.multiline,
            maxLines: null,
            decoration: new InputDecoration.collapsed(
              hintText: 'Please enter a lot of text',
            ),
          ),
        ),
      ),
    );
  }
}

编辑：要回答OP的已编辑问题-希望在与textview相同的滚动窗格中包含其他元素，请执行以下操作：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Example"),
        ),
        body: new SingleChildScrollView(
          child: new Container(
            padding: new EdgeInsets.all(7.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                new CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: new Text("AB"),
                ),
                new Expanded(
                  child: new Column(
                    children: [
                      new TextField(
                        keyboardType: TextInputType.multiline,
                        maxLines: null,
                        decoration: new InputDecoration.collapsed(
                          hintText: 'Please enter a lot of text',
                        ),
                      ),
                      new Container(
                        height: 300.0,
                        width: 100.0,
                        color: Colors.green,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

通过使用SingleChildScrollView，我们仍然允许子级设置视口的大小（与必须设置该大小的MultiChildLayoutDelegate等相反）。 textview会增长到所需的大小，但由于高度不受限制，因此不会自动滚动。行中需要Expanded，以确保右侧（带有文字和图片）与水平方向一样大。

颤振动态最大高度

1 个答案: