Flutter: как сделать так, чтобы на кнопке отображался произвольно определенный мной виджет без сохранения состояния?

Question

У меня есть кнопка, и при ее нажатии отображается stateless Widget, состоящий из Column с несколькими Text и Image.Asset. Итак, теперь у меня есть несколько таких stateless Widgets с разным содержанием. Когда я нажимаю кнопку, я хочу, чтобы он сейчас показал один из этих stateless Widgets ramdom, возможно, вариант для конкретного заказа c. Как мне это сделать?

Button и команду для отображения виджета в данный момент:

body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                if (isShown == true) Zauberwuerfel(),
                SizedBox(
                  width: 150,
                  height: 100,
                ),
                Container(
                  padding: EdgeInsets.only(bottom: 60),
                  width: 230,
                  height: 130,
                  child: RaisedButton(
                      color: Colors.red,
                      child: Text('Skill', style: TextStyle(fontSize: 30)),
                      onPressed: () {
                        setState(() {
                          isShown = true;

Один из этих stateless Widgets:

class SkillJonglieren extends StatelessWidget {
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Text(
        'Jonglieren',
        style: TextStyle(fontSize: 35),
      ),
      SizedBox(
        width: 20,
        height: 25,
      ),
      Image.asset('images/jonglieren.jpg', scale: 5),
      SizedBox(
        width: 20,
        height: 30,
      ),
      Row(mainAxisAlignment: MainAxisAlignment.center, children: <Text>[
        Text(
          'Schwierigkeit:',
          style: TextStyle(fontSize: 25),
        ),
        Text(
          ' Einfach',
          style: TextStyle(fontSize: 25, color: Colors.green),

Answer 1

Прежде всего, вам нужно сделать свой основной виджет StateFulWidget, так как вы хотите переключить переменную isShown и внести изменения в представления. Затем вам нужно составить список виджетов (например, Widget1 и Widget2) в вашем основном виджете (в котором есть кнопка):

final List<Widget> widgets = [Widget1(), Widget2()];

Чтобы выбрать один из этих виджетов случайным образом вы можете использовать:

(widgets..shuffle()).first

Вам нужно выбрать новый случайный виджет в onPressed. Чтобы отображать выбранный виджет только тогда, когда isShown истинно, вы можете использовать виджет Visibility (метод if, который вы используете, тоже подойдет). Наконец, установите дочерний элемент этого Visibility виджета на выбранный виджет.

Полный код:

final List<Widget> widgets = [Zauberwuerfel(), SkillJonglieren()];
var _isShown = false;
Widget _selectedWidget = Zauberwuerfel();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Visibility(
                  visible: _isShown,
                  child: _selectedWidget,
                ),
                SizedBox(
                  width: 150,
                  height: 100,
                ),
                Container(
                  padding: EdgeInsets.only(bottom: 60),
                  width: 230,
                  height: 130,
                ),
                RaisedButton(
                  color: Colors.red,
                  child: Text('Skill', style: TextStyle(fontSize: 30)),
                  onPressed: () {
                    setState(() {
                      _isShown = true;
                      _selectedWidget = (widgets..shuffle()).first;
                    });
                  },
                )
              ]),
        ));
  }

Answer 2

Используйте Случайный класс , чтобы сгенерировать случайное число.

• Диапазон случайного всегда будет равен числу StatelessWidget у вас есть
• Вы храните список, в котором будут храниться ваши StatelessWidget
• Когда кнопка нажата, вы получаете случайное число, а затем выбираете индекс на основе этого сгенерированного случайного числа

Предположения: Допустим, у вас есть 5 Виджеты без сохранения состояния, а именно Widget1(), Widget2(), Widget3(), Widget4() и Widget5()

Давайте быстро перейдем к code

import 'dart:math';

// Each Widget is located at an index which is unique
int randomNumber;
List<Widget> _widgets = [Widget1(), Widget2(), Widget3(), Widget4(), Widget5()];

// generating random number
void _generateRandomNumber(){
   var random = new Random();

   // now the range works like 0 to n-1
   setState(() => randomNumber = random.nextInt(_widgets.length));
}


//Triggering the function when showing the item
RaisedButton(
   color: Colors.red,
   child: Text('Skill', style: TextStyle(fontSize: 30)),
   onPressed: () {
      //calling our method
      _generateRandomNumber();

      setState(() => isShown = true);
   }
)

Теперь, наконец, показаны данные

Column(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: <Widget>[
     if (isShown == true) _widgets[randomNumber]
     ....
   ]
)

Answer 3

Назначьте случайные числа с помощью функции rand () в 'dart: math' некоторым переменным. затем используйте условие.