Flutter 文本字段布局

Question

这就是我想要的：

这就是我得到的：

这是我的代码：

      Container(
          margin: EdgeInsets.only(top: 10, bottom: 5),
          decoration: BoxDecoration(
            color: Color(0xFFEEEEEE),
            borderRadius: BorderRadius.circular(12),
          ),
          constraints: BoxConstraints(
            minHeight: 25.0,
            maxHeight: 100,
            minWidth: MediaQuery.of(context).size.width,
            maxWidth: MediaQuery.of(context).size.width,
          ),
          child: Scrollbar(
            child: TextField(
              keyboardType: TextInputType.multiline,
              controller: inputTextController,
              maxLines: null,
              style: TextStyle(
                  color: Colors.black,
              ),
              decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(horizontal: 13, vertical: 13),
                border: InputBorder.none,
                hintText: 'Type a message',
                  hintStyle: TextStyle(
                    color: Color(0xff99999B),
                  )
              ),
            ),
          ),
        ),

尝试用行包裹容器，但它溢出了。还尝试用 Row 包装 TextField 但 TextField 消失了。有什么解决办法吗？

Answer 1

先用 Flexible 包装您的 TextField 容器，然后再用 Row 包装它，主要解决了这个问题。

完整代码如下：

Row(
      children: [
        Flexible(
          child: Container(
            margin: EdgeInsets.only(top: 10, bottom: 5),
            decoration: BoxDecoration(
              color: Color(0xFFEEEEEE),
              borderRadius: BorderRadius.circular(12),
            ),
            constraints: BoxConstraints(
              minHeight: 25.0,
              maxHeight: 100,
              minWidth: MediaQuery.of(context).size.width,
              maxWidth: MediaQuery.of(context).size.width,
            ),
            child: Scrollbar(
              child: TextField(
                keyboardType: TextInputType.multiline,
                // controller: inputTextController,
                maxLines: null,
                style: TextStyle(
                  color: Colors.black,
                ),
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.mood, color: Colors.black45),
                    suffixIcon: Icon(Icons.camera_alt, color: Colors.black45),
                    contentPadding: EdgeInsets.symmetric(horizontal: 13, vertical: 13),
                    border: InputBorder.none,
                    hintText: 'Type a message',
                    hintStyle: TextStyle(
                      color: Color(0xff99999B),
                    )
                ),
              ),
            ),
          ),
        ),
        Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue,
          ),
          margin: EdgeInsets.symmetric(horizontal: 8),
          child: IconButton(
            icon: Icon(Icons.send),
            onPressed: () => {},
            color: Colors.white,
          ),
        ),
      ],
    );

Answer 2

好的，根据您提供的图像，我已经为您创建了示例，这可能适合您的用例，请检查下面关于 UI 实施的描述：

所以有一行包含三个小部件。
其中第一个小部件是一张卡片，根据设备大小进行扩展，然后子项带有另一行，其中包含以下小部件：
1. 表情符号的图标按钮。
2. 扩展到适合设备大小的文本字段。
3. 接下来是相机小部件，它也是一个 IconButton。
最后有一个浮动操作按钮。
右填充的容器，您可以使用您选择的小部件。

检查 Git 回购，这有一个示例代码： https://github.com/sagaracharya24/chat_app_input_widget.git

这是最终输出：

让我知道这是否适合你。

Flutter 文本字段布局

Flutter textfield layout

flutter

flutter-layout