Flutter:我如何制作一个按钮来显示我定义的随机无状态Widget

Question

我有一个按钮，当它被按下时，会显示一个stateless Widget，由一个带有几个Text和Image.Asset的Column组成。现在我有一些stateless Widgets，它们有不同的内容。当我按下按钮时，我想让他现在展示一个随机的stateless Widgets，也许还有一个特定订单的选项。我该怎么做？

Button和此时显示Widget的命令：

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

使用Random类生成一个随机数。

• 随机的范围将始终等于您拥有的StatelessWidget的数量
• 您存储了一个列表，该列表将保留您的StatelessWidget
• 当按下按钮时，您会得到随机数，然后根据生成的随机数提取索引

假设：让我们假设您有5无状态小工具，即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 2

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

Answer 3

首先，您需要将主小部件设置为StateFulWidget，因为您希望切换isShown变量并更改视图。然后你需要在你的主窗口小部件(里面有按钮(中列出一个窗口小部件列表(例如，窗口小部件1和窗口小部件2(：

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

要随机选择其中一个小部件，您可以使用：

(widgets..shuffle()).first

您需要在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;
});
},
)
]),
));
}