条件分岐をスマートに行いたい

[tas]

【前提】
・発生させた乱数に従ってドーナツの画像が表示されるアプリです（発生した乱数が1であればドーナツ1が、2であればドーナツ2の画像が・・といった形です。詳細は下記リンク参照）
https://www.nocodeforum.org/t/topic/1855/2
・ログイン機能は使用しません

【やりたいこと】
下記画像のように、ドーナツ1が選ばれた状態で「決定する」ボタンを押すとドーナツ1用のページに遷移する（ドーナツ2以降も同様に）といった仕組みを作りたいです。

【自分なりに考えた解決策】
①「決定する」ボタンをドーナツの数だけ作成し、Sometimes Visibleで「発生した乱数が1の場合（＝ドーナツ1が表示されている場合）表示する」といった設定を全てのボタンに行う。
②全ての「決定する」ボタンを一か所に重ねて配置する

上記の方法だと無理やり仕組みを作ることはできるのですが、プレビュー画面で見ると「決定する」ボタンの配置が崩れています。（ボタンはEDIT STYLESの項目がないため、配置を固定することもできません）

Sometimes Visibleを使うと配置が崩れる原理は何となく理解しており、崩れてしまう方向に何か（例えばRectangleなど）を置いておけば崩れなくなると理解していたのですが、下記リンクの通り上手くいきません。

条件分岐

【質問】
①そもそも仕組みとして、上記の解決策よりもスマートに条件分岐を行う方法はありますでしょうか。
②Sometimes Visibleを用いたボタンの配置を固定することはできますでしょうか。

[0941]

ドーナツの数だけボタンを作るならば、ボタンは以下の画像のように重ねないで縦に並べるとうまく行きます。（右の画像がプレビューした時）簡単なサンプルを作ったので見て下さい。

画面の構成：

（サンプル）→「決定する」ボタンは殆どずれないです。

ランダムな選択（修正1）

[tas]

ご回答ありがとうございます。

ドーナツの数が4つであれば確かに縦に並べる（要はずれることを加味して配置するということですよね？）ことで対応できるのですが、作りたいアプリではドーナツの数を4~50にしたいと思っています。

数がこれだけあると縦に並べるわけにもいかないのですが、何か良い方法はないでしょうか・・？

[0941]

そんなに画面の数が多いのですか？

（質問）
「決定する」ボタンを押して各アイテム（今回はドーナツ）の画面に遷移しますが、これってどういう画面なんですか？何のために必要なんですか？

１．どんな内容が表示されているんですか？（何をする画面？詳細情報？）
２．この画面の後はどういう流れになりますか？（元に戻るんですか、多分？）

普通に考えると数が多すぎてLinkの設定では出来ないので、太郎さんが何をしたいのかをはっきり教えてもらってそれに基づく流れを考えたいと思います。

[tas]

下記に回答させていただきます。

１．どんな内容が表示されているんですか？（何をする画面？詳細情報？）
→詳細情報を表示する画面です。例えばドーナツが買えるお店の一覧（外部リンク付き）や栄養成分、アレルギーなどの情報をタブで切り替えながら見ることができるイメージです。（イメージ画像を下に貼ります）

２．この画面の後はどういう流れになりますか？（元に戻るんですか、多分？）
→この画面の後は、お店の外部リンクに飛ぶ or ドーナツの抽選画面に戻る、といった流れになります。

他にも不明瞭な点がありましたらご指摘ください。
何卒よろしくお願い申し上げます。

[0941]

修正版のアプリを作りましたので使ってみて下さい。条件分岐にカウントダウンタイマーを使いました。カウントダウンタイマーは使ったことありますか？これは設定した時間（分、秒とか、0秒でもいい）をカウントダウンして、設定時間経過後、アクションを起こすことが出来る機能を持っています。

ランダムに製品を選んで、画面の「その製品の画面に移動」ボタンを押すと、CountDownという次画面に遷移します。この画面にはドーナツの数（サンプルでは4個）だけカウントダウンタイマーが配置されており、１～４の数字がつけられています。前ページで作られた乱数がもし２なら2番目のカウントダウンタイマーだけが出現し、設定時間経過したらその乱数の番号のページに遷移するようにアクションを組んであります。（サンプルアプリではカウントダウン秒数は0秒に設定してあります。）

一旦、CountDownページに遷移して、それから製品ページに飛ぶ動きをします。CountDownページはユーザーには見せたくないんですが、どうしてもコンマ数秒は画面遷移で表示されてしまいます。

カウントダウンタイマーはレクタングルコンポーネントでもかぶせて見えなくすることも可能です。
何だったらこのページにロッティなどからアニメでも持って来て不自然にならないようにしてもいいと思います。

１．全画面構成

２．条件分岐のロジック

青のボタン「その製品の画面に移動」を押すと次画面CountDownに一旦遷移し、その画面上でカウントダウンタイマーが一瞬表示されて、乱数と同じ数字の画面に飛んでいきます。（そういうアクションをカウントダウンタイマーに仕組んであります）

（修正版サンプルアプリ）

ランダムな選択（修正1）

（ポイント）
遷移する画面がいくつあってもいけます。50個画面があるならカウントダウンタイマーを少し小さめにして50個配置して、番号とアクションを設定すればOKです。change visibilityの設定で表示されるカウントダウンタイマーは1個しかありません。それも見せたくなかったら、四角コンポーネントで隠して下さい。

本件でカウントダウンタイマーを使おうと考えるのは私ぐらいしかいないかも知れません。（時間のアクションが結構好きなのでカウントダウンはよく使っています。）

[tas]

なるほど、この方法ならボタンの配置の問題を解消しつつ、求めていた仕組みを実装できそうです！
ありがとうございます！！

カウントダウンタイマー自体知らなかったのですが、
そもそもSometimes Visibleはただ特定の条件下以外で見えなくなるだけの機能かと思っていたので、
見えなくなるだけでなくタイマーとしての機能も失われるとは想像もしていませんでした。

UI・UXも意識するとよいと以前ご教示いただいたので、
抽選画面の「選び直す」ボタンと「決定する」ボタンが同時に表示されるようにしたり、Lottieでカウントダウン中にアニメーションを挟むなどしてみました。

条件分岐

元々どこかでアニメーションを挟みたいと思っていたので、
カウントダウンタイマーのデメリットも全く感じず、ただただ感謝でしかないです。
ありがとうございました。

[0941]

カウントダウンタイマーを知らなかった人がアプリにすぐ応用できるなんてすごいですね。アニメーションの使い方もとてもクールです。

でもカウントダウンタイマーのアイディアはなかなか思いつきませんでした。当初はスクリーンアクションを使って各画面をランダムに選択する方法を考えていたのですが、Adaloだと画面遷移の速度が遅く、各画面が表示されてしまってみっともないのでやめました。（何言っているのか分からないかも知れませんが・・・）

頑張っていいアプリを作って下さい。