flutter - 在 Flutter 中选择不同的填充
问题描述
我是家庭自动化项目，我想在填充之间进行选择，因此，例如，有一个具有“开”和“关”，还有一个具有“锁定”和“解锁”。我试图创建一个函数，所以我在不同的场合调用它们中的每一个，但不幸的是它没有工作。
我有一个创建 CustomCards 的函数，我在我的主文件中调用这些函数，所以我可以创建具有相同面孔的卡片。
这是我的代码：
class CustomCard extends StatelessWidget {
final bool isActive;
final String text;
final IconData iconData;
final VoidCallback onTap;
const CustomCard({
this.isActive,
this.text,
this.iconData,
this.onTap,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Container(
height: 100,
width: 100,
child: Card(
color: isActive ? Colors.white : Colors.grey[800],
semanticContainer: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
margin: new EdgeInsets.all(0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 4,top: 7, right: 30, bottom: 10),
child: Icon(
iconData,
color: isActive ? Colors.black : Colors.white,
size: 35,
),
),
Padding(
padding:
EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
child: new Text(
isActive ? 'On' : 'Off',
style: TextStyle(
color: isActive ? Colors.black : Colors.white),
),
),
],
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(top: 8, left: 5),
child: Text(
text,
style: TextStyle(
color: isActive ? Colors.black : Colors.white,
fontSize: 13),
),
),
),
],
),
),
),
);
}
}
在这个小部件中，我希望能够选择何时需要使用 On 和 Off，以及何时需要 Lock 和 Unlock：
Padding(
padding:
EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
child: new Text(
isActive ? 'On' : 'Off',
style: TextStyle(
color: isActive ? Colors.black : Colors.white),
),
),
这是我在主函数中调用它们的方式，这些第一个自定义按钮需要锁定和解锁，但第二个自定义按钮需要打开和关闭。该列表是我跟踪它是打开还是关闭的地方：
List<bool> cardsValue = [false, false, false, false];
CustomCard(
iconData: cardsValue[0] ? OMIcons.lock : OMIcons.lockOpen,
text: 'Front\nDoor Lock',
isActive: cardsValue[0],
onTap: () {
setState(() {
cardsValue[0] = !cardsValue[0];
});
},
),
SizedBox(width: 30.0),
CustomCard(
iconData: Icons.lightbulb_outline,
text: 'Lâmpada 2 Schuma',
isActive: cardsValue[1],
onTap: () {
setState(() {
cardsValue[1] = !cardsValue[1];
});
},
),
解决方案
如果我做对了，您正在寻找具有不同标签的相同小部件（有时是“开/关”，有时是“锁定/解锁”）。
您可以有两个不同的变量来定义这些标签。我是这样做的：
import 'package:flutter/material.dart';
void main() {
runApp(Home());
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<bool> cardsValue = [false, false, false, false];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomCard(
activeLabel: 'Lock',
inActiveLabel: 'Unlock',
iconData: cardsValue[0] ? Icons.lock : Icons.lock_open,
text: 'Front\nDoor Lock',
isActive: cardsValue[0],
onTap: () {
setState(() {
cardsValue[0] = !cardsValue[0];
});
},
),
SizedBox(width: 30.0),
CustomCard(
activeLabel: 'On',
inActiveLabel: 'Off',
iconData: Icons.lightbulb_outline,
text: 'Lâmpada 2 Schuma',
isActive: cardsValue[1],
onTap: () {
setState(() {
cardsValue[1] = !cardsValue[1];
});
},
),
],
),
),
);
}
}
class CustomCard extends StatelessWidget {
final bool isActive;
final String text;
final String activeLabel;
final String inActiveLabel;
final IconData iconData;
final VoidCallback onTap;
const CustomCard({
this.isActive,
this.text,
this.iconData,
this.onTap,
this.activeLabel,
this.inActiveLabel,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Container(
height: 100,
width: 120,
child: Card(
color: isActive ? Colors.white : Colors.grey[800],
semanticContainer: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
margin: new EdgeInsets.all(0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding:
EdgeInsets.only(left: 4, top: 7, right: 30, bottom: 10),
child: Icon(
iconData,
color: isActive ? Colors.black : Colors.white,
size: 35,
),
),
Padding(
padding:
EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
child: new Text(
isActive ? activeLabel : inActiveLabel,
style: TextStyle(
color: isActive ? Colors.black : Colors.white),
),
),
],
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(top: 8, left: 5),
child: Text(
text,
style: TextStyle(
color: isActive ? Colors.black : Colors.white,
fontSize: 13),
),
),
),
],
),
),
),
);
}
}
根据评论编辑：
如果您只需要更改标签周围的填充，您还可以为小部件定义一个填充选项，如下所示：
import 'package:flutter/material.dart';
void main() {
runApp(Home());
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<bool> cardsValue = [false, false, false, false];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomCard(
padding: EdgeInsets.only(top: 0, right: 0, bottom: 10, left: 0),
activeLabel: 'Lock',
inActiveLabel: 'Unlock',
iconData: cardsValue[0] ? Icons.lock : Icons.lock_open,
text: 'Front\nDoor Lock',
isActive: cardsValue[0],
onTap: () {
setState(() {
cardsValue[0] = !cardsValue[0];
});
},
),
SizedBox(width: 30.0),
CustomCard(
padding: EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
activeLabel: 'On',
inActiveLabel: 'Off',
iconData: Icons.lightbulb_outline,
text: 'Lâmpada 2 Schuma',
isActive: cardsValue[1],
onTap: () {
setState(() {
cardsValue[1] = !cardsValue[1];
});
},
),
],
),
),
);
}
}
class CustomCard extends StatelessWidget {
final bool isActive;
final String text;
final String activeLabel;
final String inActiveLabel;
final IconData iconData;
final EdgeInsetsGeometry padding;
final VoidCallback onTap;
const CustomCard({
this.isActive,
this.text,
this.padding,
this.iconData,
this.onTap,
this.activeLabel,
this.inActiveLabel,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Container(
height: 100,
width: 120,
child: Card(
color: isActive ? Colors.white : Colors.grey[800],
semanticContainer: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
margin: new EdgeInsets.all(0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding:
EdgeInsets.only(left: 4, top: 7, right: 30, bottom: 10),
child: Icon(
iconData,
color: isActive ? Colors.black : Colors.white,
size: 35,
),
),
Padding(
padding: padding,
child: new Text(
isActive ? activeLabel : inActiveLabel,
style: TextStyle(
color: isActive ? Colors.black : Colors.white),
),
),
],
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(top: 8, left: 5),
child: Text(
text,
style: TextStyle(
color: isActive ? Colors.black : Colors.white,
fontSize: 13),
),
),
),
],
),
),
),
);
}
}
但是您也可以将子项和图标定义为widget，因此对于这些小部件中的每一个，您都可以进行任何您想要的配置。
import 'package:flutter/material.dart';
void main() {
runApp(Home());
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<bool> cardsValue = [false, false, false, false];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomCard(
icon: Padding(
padding: EdgeInsets.only(
left: 4,
top: 7,
right: 30,
bottom: 10,
),
child: Icon(
cardsValue[0] ? Icons.lock : Icons.lock_open,
color: cardsValue[0] ? Colors.black : Colors.white,
size: 35,
),
),
child: Padding(
padding: EdgeInsets.only(
left: 0,
top: 7,
right: 0,
bottom: 10,
),
child: new Text(
cardsValue[0] ? 'Lock' : 'Unlock',
style: TextStyle(
color: cardsValue[0] ? Colors.black : Colors.white,
),
),
),
label: 'Front\nDoor Lock',
isActive: cardsValue[0],
onTap: () {
setState(() {
cardsValue[0] = !cardsValue[0];
});
},
),
SizedBox(width: 30.0),
CustomCard(
icon: Padding(
padding: EdgeInsets.only(
left: 4,
top: 7,
right: 30,
bottom: 10,
),
child: Icon(
Icons.lightbulb_outline,
color: cardsValue[1] ? Colors.black : Colors.white,
size: 35,
),
),
child: Padding(
padding: EdgeInsets.only(
left: 4,
top: 7,
right: 20,
bottom: 10,
),
child: new Text(
cardsValue[1] ? 'On' : 'Off',
style: TextStyle(
color: cardsValue[1] ? Colors.black : Colors.white,
),
),
),
label: 'Lâmpada 2 Schuma',
isActive: cardsValue[1],
onTap: () {
setState(() {
cardsValue[1] = !cardsValue[1];
});
},
),
],
),
),
);
}
}
class CustomCard extends StatelessWidget {
final bool isActive;
final Widget child;
final String label;
final Widget icon;
final VoidCallback onTap;
const CustomCard({
this.isActive,
this.child,
this.label,
this.icon,
this.onTap,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Container(
height: 100,
width: 120,
child: Card(
color: isActive ? Colors.white : Colors.grey[800],
semanticContainer: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
margin: new EdgeInsets.all(0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[icon, child],
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(top: 8, left: 5),
child: Text(
label,
style: TextStyle(
color: isActive ? Colors.black : Colors.white,
fontSize: 13),
),
),
),
],
),
),
),
);
}
}
推荐阅读
- java - Android 获取一个Layout拥有的所有children（包括Sub-childs）
- javascript - Ionic3 - 如何通过 ShareProvider 将数据从主页发送到另一个 ts 文件
- java - Maven：当shade将项目打包到jar时，如何删除本地覆盖类并使用依赖项中的原始类进行编译
- linker - 为什么将我自己的 C 库文件放入 ld 搜索路径不起作用？
- r - 数据框创建观察而不是变量
- android - 通知服务
- emacs - Emacs OSX 10.13 配置问题
- scala - 强制 pureconfig 为案例类生成 ConfigReader
- litedb - 在 LiteDB 中使用多个条件进行搜索：组合查询
- java - 页面上的 NullPointerException