Question

我正在开发一个带有textField的聊天应用程序风格的输入屏幕，但是当您键入大文本时textField扩展时，我很难拿到相机并无法发送图标以对齐白色区域的底部。我已经用扩展，灵活和专栏测试了很多东西，但是到目前为止没有任何效果。有什么想法吗？

如何获得：

我希望它看起来如何：

我的简化代码：

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Column(
        children: <Widget>[
          Flexible(
            child: Container(),
          ),
          Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(20.0))),
            child: Row(
              children: <Widget>[
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.camera_alt),
                  color: Colors.grey,
                ),
                Flexible(
                  child: TextField(
                    decoration: InputDecoration(
                      //Add th Hint text here.
                      hintText: "Digite sua mensagem",
                      border: OutlineInputBorder(),
                    ),
                    minLines: 1,
                    maxLines: 7,
                    controller: _textController,
                    onSubmitted: _handleSubmitted,
                  ),
                ),
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.send),
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

Answer 1

在“行”窗口小部件中添加此行 crossAxisAlignment: CrossAxisAlignment.end,

Answer 2

用IntrensicHeight

换行

将crossAxisAlignment: CrossAxisAlignment.stretch,添加到Row

然后将alignment: Alignment.bottomCenter,添加到每个IconButton小部件

使用代码完成示例：

child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.camera_alt),
          color: Colors.grey,
          alignment: Alignment.bottomCenter,
        ),
        ...
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.send),
          color: Colors.grey,
          alignment: Alignment.bottomCenter,
        ),
    ]
)

我使用Android Studio中的Dart Dev工具检查了绘制所有小部件的位置，找到需要更改的小部件。

行高扩展时，将图标置于底部

2 个答案: