flutter 使用动态宽度将微件相对于另一微件对齐

nbewdwxp 于 2023-08-07 发布在 Flutter

关注(0)|答案(4)|浏览(137)

我正在设计一个聊天界面。因为它是一个聊天，所以消息正文可以是任何长度。用一个容器 Package ，以给予一个漂亮的圆形设计。下面是我当前设计的代码。

Flexible(
        child: Container(
            decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                color: AppColors.chatMessageBg),
            margin: const EdgeInsets.only(top: 8, right: 100),
            padding: const EdgeInsets.only(
                left: 16, right: 16, top: 8, bottom: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                messageBodyView(index, item),
                timeView(item)
              ],
            ))),

字符串

的数据
我想要的是右边的时间文本。
我尝试使用Align小部件，然后发生了这种情况

的
我想达到的目标

的
我希望你们都能理解我的问题。

flutter

来源：https://stackoverflow.com/questions/76819727/align-a-widget-with-respect-to-another-widget-with-dynamic-width

4条答案

按热度按时间

n8ghc7c11#

使用堆栈而不是列，最小大小的行，非常重要的是从时间字段中删除对齐，相反，将其 Package 为底部和右侧均设置为0的定位。此外，使用align来代替边距来将容器推到左边（或右边）。
代码如下：

Flexible(
                    child: Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                      decoration: const BoxDecoration(
                          borderRadius:
                              BorderRadius.all(Radius.circular(20)),
                          color: Colors.amber),
                      //margin: const EdgeInsets.only(top: 8, right: 100),
                      padding: const EdgeInsets.only(
                          left: 16, right: 16, top: 8, bottom: 8),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Stack(
                            children: [
                              Padding(
                                padding:
                                    const EdgeInsets.only(bottom: 18.0),
                                child: messageBodyView(index, item),
                              ),
                              Positioned(
                                  child: timeView(item), bottom: 0, right: 0)
                            ],
                          ),
                        ],
                      )),
                ))

字符串

赞(0）回复(0）举报 2023-08-07

u7up0aaq2#

在容器中使用约束。

Flexible(
   child: Container(
     constraints:BoxConstraints( 
       maxWidth:200,
      ),
     decoration: const BoxDecoration(                  
       borderRadius: 
        BorderRadius.all( 
        Radius.circular(20)),
       color:AppColors.chatMessageBg),
       margin: const 
        EdgeInsets.only(top: 8, right:     
         100),
       padding: const EdgeInsets.only(
                left: 16, right: 16, 
                top: 8, bottom: 8),
       child: Column(
              crossAxisAlignment:   
             CrossAxisAlignment.start,
       children: [
          Row(
         mainAxisAlignment: 
          MainAxisAlignment.start, 
         children: 
          [messageBodyView(index, item),]),
          Row(
         mainAxisAlignment:  
          MainAxisAlignment.end, 
         children: [ timeView(item)]),
              ],
            ))),

字符串

赞(0）回复(0）举报 2023-08-07

bqf10yzr3#

用@mulder回答这个问题。

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    const SizedBox(width: 16),
    loadCircleImage(
        imageUrl: controller.conversation.value.host.image.url,
        width: 25,
        height: 25),
    const SizedBox(width: 10),
    Flexible(
        child: Align(
      alignment: Alignment.centerLeft,
      child: Container(
          decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              color: AppColors.chatMessageBg),
          margin: const EdgeInsets.only(top: 8, right: 100),
          padding:
              const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
          child: Stack(
            children: [
              Padding(
                padding: EdgeInsets.only(bottom: 15),
                child: messageBodyView(index, item),
              ),
              Opacity(
                opacity: 0,
                child: timeView(item),),

              Positioned(
                  child: timeView(item), bottom: 0, right: 0)
            ],
          )),
    ))
  ],
);

字符串

赞(0）回复(0）举报 2023-08-07

zengzsys4#

你的第二种方法是可以的。现在你需要的是给予容器一个最小宽度。这样当文本大小很小时它看起来很好。
我希望这能解决问题。如果不是可以ping我。
快乐编码

赞(0）回复(0）举报 2023-08-07