时间戳

首页 > 解决方案 > 如何阻止堆栈中的两个小部件相互重叠？

firebase - 如何阻止堆栈中的两个小部件相互重叠？

问题描述

我有一个看起来像给定屏幕截图的聊天信使屏幕。如您所见，底部消息隐藏在文本输入区域的后面。消息是 listview ，使用 streambuilder 构建。我想要文本输入区域上方的消息。 https://i.stack.imgur.com/A82X2.png

    return Scaffold(
      appBar: AppBarMain(context),
      body: Container(
        child: Stack(
          children: [
            chatMessageList(),
            Positioned(
              bottom: 0,
              child: Container(
                color: Color(0x54ffffff),
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 14, vertical: 20),
                  width: MediaQuery.of(context).size.width,
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                          controller: messageController,
                          style: TextStyle(color: Colors.white),
                          decoration: InputDecoration(
                              hintText: ' Message!...',
                              hintStyle: TextStyle(color: Colors.white54),
                              border: InputBorder.none),
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          sendMessage();
                        },
                        child: Container(
                            padding: EdgeInsets.all(9),
                            height: 40,
                            width: 40,
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color(0x36FFFFFF),
                                    Color(0xFFFFFFFF)
                                  ],
                                ),
                                borderRadius: BorderRadius.circular(40)),
                            child: Image.asset('assets/images/send.png')),
                      )
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

标签： firebaseflutter

解决方案

你的结构应该是这样的

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      child: chatMessageList(),
    ),
    MessageFieldWidget(),
  ],
)

这将确保您chatMessageList将占用屏幕中的所有可用空间，并且您的消息字段将仅占用它需要的空间。您不需要使用定位或填充。

推荐阅读