Flutter：如何让我定义的无状态小部件随机显示一个按钮？

Question

我有一个按钮，当它被按下时，会显示一个stateless Widget ，它由一个带有一些Text的Column和一个Image.Asset 。 所以现在我有一些具有不同内容的stateless Widgets 。 当我按下按钮时，我希望他现在随机显示这些stateless Widgets之一，也许也是特定订单的一个选项。 我怎么做？

目前用于显示 Widget 的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

使用dart:math中的rand() function 将随机数分配给一些变量。 然后使用条件。

Answer 2

使用Random class生成随机数。

• 随机的范围总是等于你拥有的StatelessWidget的数量
• 您存储一个列表，它将保留您的StatelessWidget
• 按下按钮时，您会获得随机数，然后根据生成的随机数拾取索引

假设：假设您有5 StatelessWidget，即Widget1() 、 Widget2() 、 Widget3() 、 Widget4()和Widget5()

让我们快速进入代码

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

首先，您需要将主小部件StateFulWidget ，因为您想要切换isShown变量并对视图进行更改。 然后，您需要在主小部件（其中包含按钮）中列出小部件（例如，Widget1 和 Widget2）：

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

对于 select 这些小部件之一，您可以随机使用：

(widgets..shuffle()).first

您需要 select 在onPressed一个新的随机小部件。 要仅在isShown为 true 时显示选定的小部件，您可以使用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;
                    });
                  },
                )
              ]),
        ));
  }