1

目前我尝试建立一个聊天栏。

类似于这个例子:

在此处输入图像描述

我的问题是,如果我添加一些行文本,则图标不在按钮上。

我的例子:

在此处输入图像描述

我尝试将对齐更改为按钮,但它不起作用。

这是我的第一个例子:

//chat bar
class BuildAppChatBar extends StatefulWidget {
  BuildAppChatBar();

  @override
  _BuildAppChatBar createState() => _BuildAppChatBar();
}

//chat bar
class _BuildAppChatBar extends State<BuildAppChatBar> {
  _BuildAppChatBar();

  TextEditingController _controller_text_field = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Card(
            color: Colors.white60,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(36.0),
            ),
            child: TextField(
              //keyboardType: TextInputType.,
              //disable underline
              keyboardType: TextInputType.multiline,
              maxLines: null,
              decoration: new InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,

                  //emoji
                  //alignment: Alignment.bottomCenter,
                  prefixIcon: Padding(
                    padding: const EdgeInsets.only(
                        left: 0, top: 0, right: 0, bottom: 100),
                    child: IconButton(
                      icon: Icon(
                        Icons.tag_faces,
                        color: Colors.black45,
                      ),
                      onPressed: () {},
                    ),
                  ),

                  //attachment / camera
                  suffixIcon: Container(
                    width: MediaQuery.of(context).size.width * 0.26,
                    child: Row(
                      children: [
                        //attachment
                        IconButton(
                          onPressed: () {
                            print('add button pressed');
                            _loadLocalFile();
                          },
                          icon: Icon(
                            Icons.attachment,
                            color: Colors.black45,
                          ),
                        ),
                        //camera
                        IconButton(
                          onPressed: () async {
                            //take image from camera
                            var image_camera = await _takeImageCamera(context);

                            setState(() {
                              //take image filde
                              var image_file = File(image_camera!.path);
                            });
                          },
                          icon: Icon(
                            Icons.camera_alt_rounded,
                            color: Colors.black45,
                          ),
                        ),
                      ],
                    ),
                  ),

                  //hint text
                  hintStyle: TextStyle(
                    color: Colors.black45,
                  ),
                  contentPadding: EdgeInsets.only(
                      left: MediaQuery.of(context).size.width * 0.07,
                      top: MediaQuery.of(context).size.height * 0.022),
                  hintText: "Message"),
            ),
          ),
        ),
        //voice recorder
        Container(
          width: MediaQuery.of(context).size.width * 0.12,
          height: MediaQuery.of(context).size.height * 0.07,
          //decorations
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.greenAccent.shade200,
          ),
          //icon
          child: IconButton(
            onPressed: () {
              setState(() {});
            },
            icon: Icon(
              Icons.keyboard_voice_sharp,
              color: Colors.black45,
            ),
          ),
        ),
      ],
    );
  }
}

这是我的第二个例子:

//chat bar
class BuildAppChatBarNew extends StatefulWidget {
  BuildAppChatBarNew();

  @override
  _BuildAppChatBarNew createState() => _BuildAppChatBarNew();
}

//chat bar
class _BuildAppChatBarNew extends State<BuildAppChatBarNew> {
  TextEditingController _controller_text_field = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        //text field
        Expanded(
          child: Card(
            color: Colors.white60,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(36.0),
            ),
            child: Row(
              children: [
                //emoji
                Container(
                  child: IconButton(
                    icon: Icon(
                      Icons.tag_faces,
                      color: Colors.black45,
                    ),
                    onPressed: () {},
                  ),
                ),

                //text field
                Expanded(
                  child: TextField(
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                    decoration: new InputDecoration(
                        border: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        errorBorder: InputBorder.none,
                        disabledBorder: InputBorder.none,

                        //hint text
                        hintStyle: TextStyle(
                          color: Colors.black45,
                        ),
                        hintText: "Message"),
                  ),
                ),

                //attachment / camera
                Container(
                  width: MediaQuery.of(context).size.width * 0.26,
                  child: Row(
                    children: [
                      //attachment
                      IconButton(
                        onPressed: () {
                          print('add button pressed');
                          _loadLocalFile();
                        },
                        icon: Icon(
                          Icons.attachment,
                          color: Colors.black45,
                        ),
                      ),
                      //camera
                      IconButton(
                        onPressed: () async {
                          //take image from camera
                          var image_camera = await _takeImageCamera(context);

                          setState(() {
                            //take image filde
                            var image_file = File(image_camera!.path);
                          });
                        },
                        icon: Icon(
                          Icons.camera_alt_rounded,
                          color: Colors.black45,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),

        //voice recorder
        Container(
          width: MediaQuery.of(context).size.width * 0.12,
          height: MediaQuery.of(context).size.height * 0.07,
          //decorations
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.greenAccent.shade200,
          ),
          //icon
          child: IconButton(
            onPressed: () {
              setState(() {});
            },
            icon: Icon(
              Icons.keyboard_voice_sharp,
              color: Colors.black45,
            ),
          ),
        ),
      ],
    );
  }
}

任何人都知道如何将图标设置为底部对齐?那可能吗?

很多谢谢

4

0 回答 0