click is not worked

[amwps290]

I use gpui component to develop a music app, but the button click is not worked.
the code is :

use gpui::*;
use gpui_component::{
    ActiveTheme, Icon, Sizable, StyledExt,
    avatar::Avatar,
    button::{Button, ButtonVariants},
    h_flex,
    label::Label,
    progress::Progress,
    v_flex,
};

#[derive(PartialEq, Eq, Clone, Copy)]
pub enum ViewType {
    // the top of view is lyrics and the bottom is music play controler
    LyricsWithControler,
}

pub struct LyricsWithControlerView;

pub enum PlayerState {
    Playing,
    Paused,
}

pub struct PlayerControlerView {
    song_name: SharedString,
    song_author: SharedString,
    current_state: PlayerState,
    current_progress: f32, // 0-100
    focus_handle: gpui::FocusHandle,
}

impl PlayerControlerView {
    fn view(_: &mut Window, cx: &mut App) -> Entity<Self> {
        cx.new(|cx| PlayerControlerView {
            song_name: "".into(),
            song_author: "".into(),
            current_state: PlayerState::Paused,
            current_progress: 50.,
            focus_handle: cx.focus_handle(),
        })
    }
}

impl Focusable for PlayerControlerView {
    fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {
        self.focus_handle.clone()
    }
}

impl Render for LyricsWithControlerView {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        v_flex()
            .size_full()
            .child(div().flex().size_full().bg(theme.blue).child("lyrics"))
            .child(
                div()
                    .h(px(80.0))
                    .w_full()
                    .border_1()
                    .child(PlayerControlerView::view(window, cx)),
            )
    }
}

impl Render for PlayerControlerView {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        // player controler
        v_flex()
            .size_full()
            .flex()
            // progress bar
            .child(
                div().h_flex().w_full().h_1().child(
                    Progress::new()
                        .value(self.current_progress)
                        .h(px(2.))
                        .rounded(px(1.))
                        .bg(cx.theme().primary),
                ),
            )
            .child(
                h_flex()
                    .flex()
                    .size_full()
                    .bg(linear_gradient(
                        135.0,
                        linear_color_stop(hsla(0.55, 0.7, 0.7, 1.0), 0.0),
                        linear_color_stop(hsla(0.8, 0.75, 0.75, 1.0), 1.0),
                    ))
                    // song image
                    .child(
                        div().pl_1().w(px(80.0)).flex().child(
                            Avatar::new()
                                .src("icons/logo.svg")
                                .justify_center()
                                .items_center()
                                .with_size(px(60.0)),
                        ),
                    )
                    // song name and author
                    .child(
                        v_flex()
                            .gap_1()
                            .w(px(300.0))
                            .child(Label::new(&self.song_name))
                            .child(Label::new(&self.song_author)),
                    )
                    // player controler
                    .child(
                        div()
                            .absolute()
                            .w_full()
                            .flex()
                            .gap_4()
                            .justify_center()
                            .child(
                                Button::new("previous track")
                                    .icon(Icon::default().path("icons/previous.svg"))
                                    .ghost()
                                    .on_click(|_event, _window, _app| println!("previous button")),
                            )
                            .child(
                                Button::new("play track")
                                    .icon(match &self.current_state {
                                        PlayerState::Playing => {
                                            Icon::default().path("icons/play.svg")
                                        }
                                        PlayerState::Paused => {
                                            Icon::default().path("icons/pause.svg")
                                        }
                                    })
                                    .ghost()
                                    .on_click(cx.listener(|this, _, _, cx| {
                                        match this.current_state {
                                            PlayerState::Paused => {
                                                this.current_state = PlayerState::Playing;
                                            }
                                            PlayerState::Playing => {
                                                this.current_state = PlayerState::Paused;
                                            }
                                        };
                                        cx.notify();
                                    })),
                            )
                            .child(
                                Button::new("next track")
                                    .icon(Icon::default().path("icons/next.svg"))
                                    .ghost()
                                    .on_click(|_event, _window, _app| println!("next button")),
                            ),
                    ),
            )
    }
}

I want to know ,when to use Render or RenderOnce, why this click is not worked?

[huacnlee]

.child(PlayerControlerView::view(window, cx)),

This line is not correct. Every time on render, the view will be dropped.

[amwps290]

Thank you !