我想在 flutter 中制作这个布局:
它由五个按钮组成,其中第五个按钮位于其他四个按钮的中间,给人一种其他按钮不是矩形的错觉。
这在 flutter 中甚至可能吗?欢迎提供一些指南。
谢谢。
最佳答案
您可以使用 Stack
小部件将 Circle 按钮放置在中心。
这是我做的例子:
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey[800],
body: Center(
child: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyButton(),
MyButton(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyButton(),
MyButton(),
],
),
],
),
Center(
child: MyCircleButton(),
),
],
),
),
);
}
}
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 120,
margin: EdgeInsets.all(5),
height: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
print("On click");
},
),
),
);
}
}
class MyCircleButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(60.0)),
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10.0),
),
child: Material(
color: Colors.transparent,
child: InkWell(
highlightColor: Colors.red,
onTap: () {
print("On circle click");
},
),
),
),
);
}
}
尝试阅读更多关于 Flutter 布局的信息,这里有很多信息:https://flutter.dev/docs/development/ui/layout
关于flutter - 在 flutter 中重新创建此布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55765623/