streamlit 入れ子構造のボタンの作成について

Question

Streamlitにて以下のコードを実行し
GOALという文字を表示させたいと考えております。

$ streamlit --version
Streamlit, version 1.0.0

import streamlit as st

i=1
f=st.button(f"{i}st button")
if f:
    st.write(f"{i}st button is pushed.")
    i+=1
    s=st.button(f"{i}nd button")
    if s:
        st.write(f"{i}nd button is pushed.")
        i+=1
        t=st.button(f"{i}rd button")
        if t:
            st.write("GOAL")

しかし,こちらのコードを

$ streamlit run **.py

で実装しても以下のような挙動となってしまいGOALを表示させることができません:

https://www.youtube.com/watch?v=jkpXFlLmaKI

こちらに関して解決策を教えていただけると幸いです。

Answer 1

Button inside button is resetting the page #931に記載されているとおり、ボタンが押されると、そのコード全体が最初から再実行されます。
再実行時には、以前にどのボタンが押されたかは記憶していないため、期待した動作はできません。
ただしStreamlitの備忘録 状態の保持に記載されているsession_stateを利用するとできるかもしれません。

追記。Version 1.1.0でできました。

import streamlit as st

i = 1
if 'i' in st.session_state:
   i = st.session_state['i']

states = [
    (f"{i}st button",f"{i}st button is pushed."),
    (f"{i}nd button",f"{i}nd button is pushed."),
    (f"{i}rd button","GOAL")
]
title, mes = states[i-1]

f=st.button(title)
if f:
    st.write(mes)
    i += 1
    if i > len(states):
        i = 1
    st.session_state['i'] = i

Comments

[unser]

ありがとうございます。