颤动：如何在聊天消息的右下角对齐时间

Question

这是我的 chat screen 屏幕截图。我想在聊天消息下对齐 time，不是从一开始而是在聊天磁贴的右下角。

我如何在我的代码中做到这一点？

 Column(
    crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 2.0),
                      child: Image.network(senderPhoto,
            ))),
                  SizedBox(width: 20),
                  Text(peerName),
                ],
              ),
              Container(
                  margin: EdgeInsets.only(right: 130),
                  padding: EdgeInsets.only(
                      top: 10, bottom: 10, left: 10, right: 10),
                  ),
                  child: Text(message,
                          textAlign: TextAlign.start,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                              )),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 1.0),
                    child: Text(
                      timeSent.toDate(),
                      style: TextStyle(fontSize: 10, color: Colors.white),
                    ),
                  ),
                ],
              ),
            ],
          ))

Answer 1

将您的 timeSent.toDate 填充小部件包裹成一行，并为其指定一个 mainaxisAlignment 结束，如下所示：

     Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 1.0),
            child: Text(
              timeSent.toDate(),
              style: TextStyle(fontSize: 10, color: Colors.white),
            ),
          ),
        ],
      ),

这将解决您的问题。

Answer 2

将Text字段包裹在Row中，给mainAxisAlignment结束。那将解决问题。

 Column(
    crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 2.0),
                      child: Image.network(senderPhoto,
            ))),
                  SizedBox(width: 20),
                  Text(peerName),
                ],
              ),
              Container(
                  margin: EdgeInsets.only(right: 130),
                  padding: EdgeInsets.only(
                      top: 10, bottom: 10, left: 10, right: 10),
                  ),
                  child: Text(message,
                          textAlign: TextAlign.start,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                      )),
                     Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                       Padding(
                           padding: const EdgeInsets.only(top: 1.0),
                           child: Text(
                          timeSent.toDate(),
                          style: TextStyle(fontSize: 10, color: Colors.white),
                                       ),
                                     ),
                         ],
                     ),
            ],
          ));

颤动：如何在聊天消息的右下角对齐时间

flutter: how to align time on the bottom right side of chat message

chat

alignment

flutter