Jetpack Compose：如何右对齐自适应内容的容器

核心思路 #

要做出右侧对齐的聊天气泡，关键两点：一是让气泡容器靠父布局右侧排列，二是气泡宽度随文本内容自适应，但不超过父布局的最大可用宽度（一般设为屏幕宽度的70%左右，避免气泡占满整个屏幕）。

Android 实现示例 #

用ConstraintLayout做列表项根布局是最灵活的方式：

• 给气泡TextView设置app:layout_constraintEnd_toEndOf="parent"，直接把气泡钉在父布局右侧
• 加android:maxWidth="250dp"限制气泡最大宽度，防止内容过长时占满屏幕
• 气泡的宽高设为wrap_content，让它根据文本自动调整大小

对应的布局代码：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <TextView
        android:id="@+id/right_msg_bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/right_bubble_bg" <!-- 替换成你自己的气泡背景 -->
        android:padding="12dp"
        android:maxWidth="250dp"
        android:text="这是一条右对齐的气泡消息，内容长了会自动换行哦"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

如果用LinearLayout，把根布局设为横向排列，android:gravity="end"，再给气泡设android:layout_gravity="end"和maxWidth也能实现。

iOS 实现示例 #

用UITableViewCell做聊天项的话，直接给气泡视图加约束就行：

• 把气泡的trailingAnchor和contentView的trailingAnchor绑定，留16pt间距
• 限制气泡最大宽度为屏幕宽度的70%，同时让leadingAnchor和contentView的leadingAnchor保持最小间距，保证气泡不会贴到左边
• 气泡里的UILabel要设numberOfLines = 0，让文本自动换行

Swift代码示例：

class RightChatCell: UITableViewCell {
    private let bubbleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.backgroundColor = UIColor.systemBlue
        label.textColor = .white
        label.layer.cornerRadius = 12
        label.clipsToBounds = true
        // 给文本加内边距
        label.layoutMargins = UIEdgeInsets(top: 8, left: 12, bottom: 8, right: 12)
        label.isLayoutMarginsRelativeArrangement = true
        return label
    }()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupBubbleConstraints()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupBubbleConstraints() {
        contentView.addSubview(bubbleLabel)
        bubbleLabel.translatesAutoresizingMaskIntoConstraints = false
        
        let maxBubbleWidth = UIScreen.main.bounds.width * 0.7
        NSLayoutConstraint.activate([
            bubbleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            bubbleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            bubbleLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8),
            bubbleLabel.leadingAnchor.constraint(greaterThanOrEqualTo: contentView.leadingAnchor, constant: 16),
            bubbleLabel.widthAnchor.constraint(lessThanOrEqualToConstant: maxBubbleWidth)
        ])
    }

    // 给cell设置消息内容
    func setMessage(_ text: String) {
        bubbleLabel.text = text
    }
}

记得在UITableView里开启自动计算行高：

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 44

不管是Android还是iOS，布局测量都是父视图先传尺寸范围，子视图计算自身大小，最后父视图确定自己的最终尺寸的双向流程，以Android为例：

1. 父布局拿到测量规格：根布局（比如ConstraintLayout）从RecyclerView拿到可用的最大宽高（MeasureSpec），比如宽度是屏幕宽度，高度是wrap_content。
2. 父布局传递测量要求给子视图：父布局把自己的可用空间转换成子视图的测量规格，因为我们给气泡设了maxWidth，所以气泡TextView的宽度测量模式是AT_MOST，上限是250dp。
3. 子视图计算自身尺寸：TextView根据文本内容、字体大小、内边距，算出需要的宽高。如果文本长度超过250dp，就自动换行，高度跟着增加。
4. 父布局确定自身尺寸：父布局根据气泡的最终尺寸，加上自己的padding，确定自己的高度（wrap_content就是气泡的高度+上下padding），宽度保持屏幕宽度。

iOS的流程大同小异：

1. contentView获取可用空间：UITableView给cell的contentView提供屏幕宽度作为可用宽度，高度是自适应的。
2. 气泡视图计算尺寸：气泡根据约束（右侧锚定、最大宽度限制），让内部的UILabel计算文本所需的宽高（numberOfLines=0时会自动换行计算高度）。
3. 确定cell高度：UITableView根据气泡的最终尺寸，加上contentView的上下内边距，自动算出cell的高度（前提是开了automaticDimension）。

内容的提问来源于stack exchange，提问作者Regress.arg