Flutter - 使用 for 循环或列表创建具有可编辑属性的自定义小部件
Flutter- Using for loops or lists to create custom widgets with editable properties
我创建了一个自定义 class,RectButton,具有 buttonChild、bgColor 和 onPress 的可编辑属性。我希望通过创建一个新的小部件来使这个小部件更加动态,该小部件可以基于可变整数(即一个屏幕上有 4 个按钮,另一个屏幕上有 3 个按钮等)创建一行这些 RectButtons 但无法弄清楚如何继续在新小部件中具有完全可编辑的属性(bgColor 不依赖于索引,即 bgColor: Colors.red[100 + 100 * index])。
class RectButton extends StatelessWidget {
RectButton({this.buttonChild, this.bgColor, this.onPress});
final Widget buttonChild;
final Color bgColor;
final Function onPress;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
constraints: BoxConstraints.expand(width: 100, height: 50),
child: Center(child: buttonChild),
decoration: BoxDecoration(
color: bgColor,
shape: BoxShape.rectangle,
border: Border.all(width: 1, color: Colors.white)),
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
),
);
}
}
有什么想法吗?任何帮助深表感谢。我一直在谷歌搜索我能找到的关于循环和列表的所有东西,但没有成功。也欢迎任何资源——对 flutter 有点陌生 :)
编辑:更新代码
import 'package:flutter/material.dart';
import 'rect_button.dart';
enum Options { option0, option1, option2, option3 }
class Screen1 extends StatefulWidget {
@override
_Screen1State createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
List<Widget> makeButtons(int num, List<Widget> children, List<Color> colors,
List<Function> onPresses) {
List<Widget> buttons = new List();
for (int i = 0; i < num; i++) {
buttons.add(RectButton(children[i], colors[i], onPresses[i]));
}
return buttons;
}
Options selectedOption;
@override
Widget build(BuildContext context) {
int num = 2;
List<Widget> children = [
Text("A"),
Text("B"),
];
List<Color> colors = [
selectedOption == Options.option0 ? Colors.red : Colors.green,
selectedOption == Options.option1 ? Colors.red : Colors.green
];
List<Function> onPresses = [
() {
setState(() {
selectedOption = Options.option0;
});
},
() {
setState(() {
selectedOption = Options.option1;
});
},
];
// 3rd method does nothing
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: Row(
children: makeButtons(3, children, colors, onPresses),
),
);
}
}
如果您可以为每个 child、颜色、您想要的 onPress 创建列表,您可以使用下面的代码循环并创建 RectButton
:
的列表
List<Widget> makeButtons(int num, List<Widget> children, List<Color> colors, List<Function> onPresses){
List<Widget> buttons = new List();
for(int i = 0; i < num; i ++){
buttons.add(RectButton(buttonChild: children[i], bgColor: colors[i], onPress: onPresses[i]));
}
return buttons;
}
您可以将它与 Row
一起使用,例如:
Row(
children: makeButtons(...),
),
您还可以修改 makeButtons
方法以添加可选参数,以防您想要一种颜色 consistently/with [100+100*i] 差异等
编辑:构建方法示例:
Widget build(BuildContext context) {
int num = 2;
List<Widget> children = [Text("A"), Text("B"), Text(_counter.toString())];
List<Color> colors = [Colors.red, Colors.blue, Colors.green];
List<Function> onPresses = [_incrementCounter, _decrementCounter, (){}];
// 3rd method does nothing
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Row(
children: makeButtons(3, children, colors, onPresses),
),
);
}
我创建了一个自定义 class,RectButton,具有 buttonChild、bgColor 和 onPress 的可编辑属性。我希望通过创建一个新的小部件来使这个小部件更加动态,该小部件可以基于可变整数(即一个屏幕上有 4 个按钮,另一个屏幕上有 3 个按钮等)创建一行这些 RectButtons 但无法弄清楚如何继续在新小部件中具有完全可编辑的属性(bgColor 不依赖于索引,即 bgColor: Colors.red[100 + 100 * index])。
class RectButton extends StatelessWidget {
RectButton({this.buttonChild, this.bgColor, this.onPress});
final Widget buttonChild;
final Color bgColor;
final Function onPress;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
constraints: BoxConstraints.expand(width: 100, height: 50),
child: Center(child: buttonChild),
decoration: BoxDecoration(
color: bgColor,
shape: BoxShape.rectangle,
border: Border.all(width: 1, color: Colors.white)),
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
),
);
}
}
有什么想法吗?任何帮助深表感谢。我一直在谷歌搜索我能找到的关于循环和列表的所有东西,但没有成功。也欢迎任何资源——对 flutter 有点陌生 :)
编辑:更新代码
import 'package:flutter/material.dart';
import 'rect_button.dart';
enum Options { option0, option1, option2, option3 }
class Screen1 extends StatefulWidget {
@override
_Screen1State createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
List<Widget> makeButtons(int num, List<Widget> children, List<Color> colors,
List<Function> onPresses) {
List<Widget> buttons = new List();
for (int i = 0; i < num; i++) {
buttons.add(RectButton(children[i], colors[i], onPresses[i]));
}
return buttons;
}
Options selectedOption;
@override
Widget build(BuildContext context) {
int num = 2;
List<Widget> children = [
Text("A"),
Text("B"),
];
List<Color> colors = [
selectedOption == Options.option0 ? Colors.red : Colors.green,
selectedOption == Options.option1 ? Colors.red : Colors.green
];
List<Function> onPresses = [
() {
setState(() {
selectedOption = Options.option0;
});
},
() {
setState(() {
selectedOption = Options.option1;
});
},
];
// 3rd method does nothing
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: Row(
children: makeButtons(3, children, colors, onPresses),
),
);
}
}
如果您可以为每个 child、颜色、您想要的 onPress 创建列表,您可以使用下面的代码循环并创建 RectButton
:
List<Widget> makeButtons(int num, List<Widget> children, List<Color> colors, List<Function> onPresses){
List<Widget> buttons = new List();
for(int i = 0; i < num; i ++){
buttons.add(RectButton(buttonChild: children[i], bgColor: colors[i], onPress: onPresses[i]));
}
return buttons;
}
您可以将它与 Row
一起使用,例如:
Row(
children: makeButtons(...),
),
您还可以修改 makeButtons
方法以添加可选参数,以防您想要一种颜色 consistently/with [100+100*i] 差异等
编辑:构建方法示例:
Widget build(BuildContext context) {
int num = 2;
List<Widget> children = [Text("A"), Text("B"), Text(_counter.toString())];
List<Color> colors = [Colors.red, Colors.blue, Colors.green];
List<Function> onPresses = [_incrementCounter, _decrementCounter, (){}];
// 3rd method does nothing
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Row(
children: makeButtons(3, children, colors, onPresses),
),
);
}