如何实现类似微信的聊天气泡功能

w4xxx

问题是这样的：想做一个类似微信的聊天气泡弹出功能，就用viewport套了一个vbox
现在有两个问题
1 vbox里动态添加新气泡后，viewport的yinitial 1.0无效，界面不会自动刷新到最下方，有没有别的设置方法？
2 如果想播放新插入气泡向上滚动的动画，应该在怎么加呢？



代码如下，求指导

[RenPy] 纯文本查看 复制代码

    viewport id "vp":
        xsize 340
        ysize 320
        at ca_pos(0.95, 0.1, 1.0)

        # scrollbars "vertical"
        mousewheel True
        draggable True
        pagekeys True
        side_yfill True
        # yinitial len(bubbles) * 130
        # yadjustment adj
        # value 20
        yinitial 1.0
        # yoffset 1.0
        spacing 15
        vbox:
            for bubble in bubbles:
                if bubble == 0:
                    add "gui/icon/counterpart bubble.png":
                        zoom 0.625
                else:
                    add "gui/icon/me bubble.png":
                        zoom 0.625

w4xxx

被诅咒的章鱼 发表于 2022-7-2 14:34
之前有个帖子实现过类似的：

https://www.renpy.cn/forum.php?mod=viewthread&tid=229

研究了一下，他的解决方案相对静态，没有我想要的滚动效果。
借鉴了一些东西，终于可以交作业了，最后实现的版本大约是这样的。

首先，定义个结构，用来储存气泡对话和对话框

[RenPy] 纯文本查看 复制代码

init -1 python:
    class Bubble:
        def __init__(self, bubble_type = 0, bubble_text=""):
            bubble_pic_list = ["gui/icon/counterpart bubble.png", "gui/icon/me bubble.png"]
            self.bubble_type = bubble_type
            self.bubble_text = bubble_text
            self.pic_url = bubble_pic_list[bubble_type]

然后，定义一个滚动的变换

[RenPy] 纯文本查看 复制代码

transform bubble_roll(a,b):
    yoffset a
    linear 0.5 yoffset b

接着，初始化对话气泡，和添加新气泡的函数（点击一个按钮，执行函数，添加一个气泡）

[RenPy] 纯文本查看 复制代码

    bubbles = []
    bubbles.append(Bubble(0,"你好啊"))

# 添加对话气泡
label add_dialogue_bubble():
    python:
        bubble_type = random.randint(0,1)
        bubbles.append(Bubble(bubble_type,"我们都非常好，你呢？"))
    return

最后在vbox下循环中计算添加组件的yoffset，并套用变换，就可以实现滚动效果了！（yinitial 是坑，动态添加组件时不要使用）

[RenPy] 纯文本查看 复制代码

    viewport id "vp":
        xsize 340
        ysize 320
        align (0.95, 0.1)
        mousewheel True
        draggable True
        pagekeys True
        side_yfill True

        vbox:
            spacing 15
            python:
                if len(bubbles) == 1:
                    y = 200
                else:
                    y = -len(bubbles) * 130 + 460
            for bubble in bubbles:
                imagebutton :
                    foreground Text(bubble.bubble_text, xalign = 0.3, yalign = 0.2, size = 20)
                    idle bubble.pic_url
                    hover bubble.pic_url
                    if len(bubbles) >= 2:
                        at bubble_roll(y,y-130)
                    else:
                        yoffset y
                    action Return("debate")

然后是效果图：
滚动前




添加一个气泡，滚动后

被诅咒的章鱼

之前有个帖子实现过类似的：

https://www.renpy.cn/forum.php?mod=viewthread&tid=229

w4xxx

被诅咒的章鱼 发表于 2022-7-2 14:34
之前有个帖子实现过类似的：

https://www.renpy.cn/forum.php?mod=viewthread&tid=229

非常感谢大佬

我研究学习下