对于我的 Flutter 应用程序，我希望四个按钮一起形成一个圆圈。这是我想要的图像。
我不知道如何在颤动中设置按钮角的样式。 在按钮 1 的情况下，我的想法是占据左上角并设置边框半径并保持其他角正常。使用其他按钮，我会对适当的角落做同样的事情。为了安排我的“披萨片”，我会使用列和行。 我只是不知道也无法弄清楚如何设置一个角的样式。
提前感谢大家的帮助。
【问题讨论】：
标签： flutter button rounded-corners cornerradius
一种可能的解决方案是创建一个具有固定宽度和高度的容器。然后使用 BorderRadius.only 为 topLeft、topRight 等设置背景颜色和边框半径。 现在您只需创建一个包含两行包含各自容器的列。
例如：
// pizza_button.dart
enum PizzaPosition { topLeft, topRight, bottomLeft, bottomRight }
class PizzaButton extends StatelessWidget {
final PizzaPosition pizzaPosition;
final _buttonSize = 60.0;
const PizzaButton({Key? key, required this.pizzaPosition}) : super(key: key);
BorderRadiusGeometry? _generateBorderRadius() {
switch (pizzaPosition) {
case PizzaPosition.topLeft:
return BorderRadius.only(
topLeft: Radius.circular(_buttonSize),
);
case PizzaPosition.topRight:
return BorderRadius.only(
topRight: Radius.circular(_buttonSize),
);
case PizzaPosition.bottomLeft:
return BorderRadius.only(
bottomLeft: Radius.circular(_buttonSize),
);
case PizzaPosition.bottomRight:
return BorderRadius.only(
bottomRight: Radius.circular(_buttonSize),
);
}
}
@override
Widget build(BuildContext context) {
return Container(
width: _buttonSize,
height: _buttonSize,
margin: EdgeInsets.all(1.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: _generateBorderRadius(),
),
child: Text("1"),
);
}
}
对于整个“披萨”，一个示例小部件将是
class Pizza extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PizzaButton(pizzaPosition: PizzaPosition.topLeft),
PizzaButton(pizzaPosition: PizzaPosition.topRight),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PizzaButton(pizzaPosition: PizzaPosition.bottomLeft),
PizzaButton(pizzaPosition: PizzaPosition.bottomRight),
],
)
],
),
);
}
}
现在要让它作为按钮工作，您应该将容器包装在 GestureDetectors 中的 PizzaButton 内，并指定您的操作 onTap，例如可以作为 PizzaButton 的另一个属性保存。
【讨论】：
你可以在这样的卡片里面做到这一点
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(60.0),
),
child: SizedBox(
width: 120,
height: 120,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("1"),
)),
),
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("2"),
)),
)
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("1"),
)),
),
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("2"),
)),
)
],
),
)
],
),
),
),
),
));
}
【讨论】：
您好，我使用 Grid View 和“Clip R REC t”来实现这一点 enter image description here
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 120,
width: 120,
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(0),
crossAxisSpacing: 3,
mainAxisSpacing: 3,
crossAxisCount: 2,
children: [
ElevatedButton(
onPressed: () {},
child: Text("1", textAlign: TextAlign.right),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Text("2", textAlign: TextAlign.center),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Text("3", textAlign: TextAlign.center),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Text("4", textAlign: TextAlign.center),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
],
),
),
),
),
),
);
}
}
您可以使用 Align 小部件并将您的数字与您的数字对齐，这样您就有了一个漂亮的 UI：enter image description here
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 120,
width: 120,
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(0),
crossAxisSpacing: 3,
mainAxisSpacing: 3,
crossAxisCount: 2,
children: [
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(0.5, 0),
child: Text("1", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(-0.5, 0),
child: Text("2", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(0.5, 0),
child: Text("3", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(-0.5, 0),
child: Text("4", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
],
),
),
),
),
),
);
}
}
您可以在图像和代码之间进行比较，如果您喜欢我的回答并且它很有用，我很乐意为您评价我的回答。 谢谢。
【讨论】：
谢谢大家！ 我得到了一个基于这个问题的解决方案： [https://stackoverflow.com/questions/53138955/how-can-i-make-a-buttons-corner-only-rounded-on-the-top]
基于@fusion 的回答
我的解决方案如下所示：
import 'package:flutter/material.dart';
enum QuarterPosition { topLeft, topRight, bottomLeft, bottomRight }
class QuarterButton extends StatelessWidget {
const QuarterButton({Key? key, required this.position, this.size = 100, this.text = ""}) : super(key: key);
final QuarterPosition position;
final double size;
final String text;
BorderRadiusGeometry _generateBorderRadius() {
switch (position) {
case QuarterPosition.topLeft:
return BorderRadius.only(
topLeft: Radius.circular(size),
);
case QuarterPosition.topRight:
return BorderRadius.only(
topRight: Radius.circular(size),
);
case QuarterPosition.bottomLeft:
return BorderRadius.only(
bottomLeft: Radius.circular(size),
);
case QuarterPosition.bottomRight:
return BorderRadius.only(
bottomRight: Radius.circular(size),
);
}
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
child: Text(text, style: TextStyle(fontSize: 30, color: Colors.white)),
style: ElevatedButton.styleFrom(
primary: Colors.black54,
fixedSize: Size(size, size),
shape: RoundedRectangleBorder(
borderRadius: _generateBorderRadius(),
),
side: BorderSide(color: Colors.white)),
);
}
}
我现在可以这样使用它了。
Column(
children: [
Row(
children: [
QuarterButton(position: QuarterPosition.topLeft, size: 100, text: "1"),
QuarterButton(position: QuarterPosition.topRight, size: 100, text: "2"),
],
),
Row(
children: [
QuarterButton(position: QuarterPosition.bottomLeft, size: 100, text: "3"),
QuarterButton(position: QuarterPosition.bottomRight, size: 100, text: "4"),
],
),
],
);
感谢所有快速回答。很棒的社区！ :)
【讨论】：