[英]Can I do this design in Flutter?
Design in Flutter. Flutter 中的设计。 The point is that the number of buttons in a row depends on the size of buttons, so the crossAxisCount is not fix.
关键是一行中的按钮数量取决于按钮的大小,因此 crossAxisCount 不固定。 I don't know how to put a button in the next row if there is not enough space.
如果没有足够的空间,我不知道如何在下一行放置一个按钮。
Container(
color: Colors.red,
width: appWidth * 0.8,
child: Row(
children: [
for (var i in provider.getFilterButtons)
Row(
children: [
SizedBox(
height: appHeight * 0.05,
child: OutlinedButton(
onPressed: () {},
child: Row(
children: [
Text(
'${i.name}: ${i.value}',
style: TextStyle(
fontSize: appHeight * 0.021),
),
IconButton(
padding: EdgeInsets.zero,
constraints:
const BoxConstraints(),
onPressed: () {},
iconSize: appHeight * 0.02,
icon: const Icon(
Icons.close,
color: Colors.black,
),
)
],
),
style: OutlinedButton.styleFrom(
onSurface: Colors.red,
side: const BorderSide(
color: AppColors.lightPurple,
),
),
),
),
SizedBox(width: appWidth * 0.02),
],
),
],
),
)
Check below code it will help you,检查下面的代码它会帮助你,
class CustomTag extends StatefulWidget {
const CustomTag({Key key}) : super(key: key);
@override
_CustomTagState createState() => _CustomTagState();
}
class _CustomTagState extends State<CustomTag> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: [
tag(name: "Name: iPad"),
tag(name: "Name: iPad 1"),
tag(name: "Name: iPad 2"),
tag(name: "Name: iPad Mob 3"),
tag(name: "iPad 4"),
tag(name: "Name: iPad"),
tag(name: "Name: iPad 6"),
],
),
),
),
);
}
Widget tag({String name}) {
return Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
border: Border.all(color: Colors.purple),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
name ?? "",
style: TextStyle(color: Colors.purple),
),
Icon(
Icons.close,
size: 16.0,
color: Colors.black,
),
],
),
);
}
}
Instead of using row to display those items generated by for loops.而不是使用 row 来显示那些由 for 循环生成的项目。 You can use Wrap.
您可以使用包装。
Container(
color: Colors.red,
width: appWidth * 0.8,
child: Wrap(
children: [
for (var i in provider.getFilterButtons)
Row(
Thank you very much, it worked like a charm.非常感谢,它就像一个魅力。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.