Flutter 将文本字段对齐到底部，文本从顶部对齐

Question

如何从顶部对齐文本，从底部对齐文本字段？这是为了创建一种类似聊天的界面。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,

          children: <Widget>[
            Text(
              'Hello, How are you?\nwow',
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis,
              //style: new TextStyle(fontWeight: FontWeight.bold),
            ),
            TextField(
              controller: myController,
              onChanged: (text) {
                //print("First text field: $text");
              },
              onSubmitted: (text) {
                print(text);
                //myController.clear();
                myController.text = "";
              },
              decoration: new InputDecoration(
                  hintText:"Enter your response."
              ),
              focusNode: _focusNode,
              autofocus: true,
            ),
          ],
        ),
      ),
    );
  }

我试过将文本和文本字段分隔到容器中，但无济于事。

有没有一种类似于 iOS 布局约束的方法，其中文本字段被限制为键盘高度，文本被限制为文本字段？

Answer 1

您可以在 Column 中的 Text 和 TextField 之间插入一个 Expanded。这将尽可能多地占据两者之间的 space，从而推动你的 Text 向上和 TextField 向下：

Column(
  children: [
    Text(...),
    Expanded(child: Container()),
    TextField(...),
  ],
);

Flutter 将文本字段对齐到底部，文本从顶部对齐

Flutter align textfield to bottom and text from top

dart

flutter

flutter-layout