테두리 반지름이 있는 둥근 단추/단추를 Flott에 작성합니다.
테두리 반지름이 있는 둥근 단추/단추를 Flott에 작성합니다.
나는 현재 Fluter에서 안드로이드 앱을 개발하고 있다. 둥근 단추를 추가하려면 어떻게 해야 하나요?
위젯을 사용할 수 있습니다. 상승 버튼 위젯에는 아래 스니펫에 표시된 대로 사용할 수 있는 속성이 있습니다.
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(
color: Colors.teal,
width: 2.0,
),
),
),
),
child: Text('Submit'),
onPressed: () {},
),
또는 를 사용하여 사용자 지정 단추와 , , 등의 속성을 얻을 수 있습니다.
new InkWell(
onTap: () => print('hello'),
child: new Container(
//width: 100.0,
height: 50.0,
decoration: new BoxDecoration(
color: Colors.blueAccent,
border: new Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.circular(10.0),
),
child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
),
),
위젯에서 및 속성을 사용하려면 컨테이너를 장식하는 대신 위젯을 위젯의 상위 항목으로 사용합니다(장식 속성 삭제).
재료 앱을 기본 위젯으로 사용하는 경우 재료 단추를 항상 사용할 수 있습니다.
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
shadowColor: Colors.lightBlueAccent.shade100,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: (){//Actions here//},
color: Colors.lightBlueAccent,
child: Text('Log in', style: TextStyle(color: Colors.white),),
),
),
)
간단하게 사용할 수 있습니다.
Padding(
padding: EdgeInsets.only(left: 150.0, right: 0.0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("Search"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
)
출력:
추가 정보:
아래 코드를 사용하여 그라데이션 색상의 둥근 단추를 만들 수 있습니다.
Container(
width: 130.0,
height: 43.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Color(0xff1d83ab),
Color(0xff0cbab8),
],
),
),
child: FlatButton(
child: Text(
'Sign In',
style: TextStyle(
fontSize: 16.0,
fontFamily: 'Righteous',
fontWeight: FontWeight.w600,
),
),
textColor: Colors.white,
color: Colors.transparent,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
onPressed: () {
},
),
);
이 코드는 투명 색상을 내부 색상 속성으로 전달하여 둥근 단추에 사용할 수 있습니다. 또한 이 단추는 및 위젯만 사용합니다.
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
)
갱신하다
이제 왼쪽 단추가 더 이상 사용되지 않으므로 오른쪽 단추를 사용하십시오.
Deprecated --> Recommended
RaisedButton --> ElevatedButton
OutlineButton --> OutlinedButton
FlatButton --> TextButton
ElevatedButton
사용.
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom(shape: StadiumBorder()), )
사용.
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), // <-- Radius ), ), )
사용.
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), )
사용.
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12) ), ), )
OutlinedButton
사용.
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: StadiumBorder(), ), )
사용.
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )
사용:
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), )
사용.
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )
텍스트 단추
또한 와 유사하게 작동하지만, 버튼을 눌러야 모양을 볼 수 있습니다.
1. 솔루션 요약
더 이상 사용되지 않습니다.
따라서 속성에 배치된 항목을 및 에 사용할 수 있습니다.
Flower 2.0 이후로 몇 가지 변경 사항이 있습니다.
- : 속성 유형이 다음으로 변경되었습니다.
- : 속성 유형이 다음으로 변경되었습니다.
2. 둥근 단추
속성 내부에 다음 속성이 있습니다.
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
)
사각 단추
사각 단추의 경우 다음을 사용하거나 추가할 수 있습니다.
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
)
전체 예제
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
child: Text(
"Add to cart".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
),
SizedBox(width: 10),
ElevatedButton(
child: Text(
"Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
)
]
)
플러터에서 위젯은 위젯 스타일을 지정하는 데 사용됩니다. 위젯을 사용하여 위젯의 테두리 또는 둥근 모서리를 설정할 수 있습니다.
스타일을 설정하고 장식을 설정하려면 해당 위젯을 위젯에 넣습니다. 그것은 장식에 많은 특성을 제공한다.
Container(
width: 100,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(30)), // Make rounded corner
child: Text("Click"),
)
만약 누군가 완전한 원형 버튼을 찾고 있다면, 나는 다음과 같은 방법으로 그것을 달성했다:
Center(
child: SizedBox.fromSize(
size: Size(80, 80), // Button width and height
child: ClipOval(
child: Material(
color: Colors.pink[300], // Button color
child: InkWell(
splashColor: Colors.yellow, // splash color
onTap: () {}, // Button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.linked_camera), // Icon
Text("Picture"), // Text
],
),
),
),
),
),
)
에서 도형을 사용하려면 위젯 내부의 모든 코드를 수행해야 합니다.
**shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red) ),**
만약 당신이 그것을 만들고 싶다면, 그것을 자동적으로 그것으로 만든다를 사용하세요.
버튼은 다음과 같습니다.
다음은 UI 지정 화면의 모든 소스 코드입니다.
Scaffold(
backgroundColor: Color(0xFF8E44AD),
body: new Center(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
padding: new EdgeInsets.only(top: 92.0),
child: Text(
"Currency Converter",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(),
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "Amount",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "From",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "To",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
)),
),
),
SizedBox(height: 20.0),
MaterialButton(
height: 58,
minWidth: 340,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(12)),
onPressed: () {},
child: Text(
"CONVERT",
style: TextStyle(
fontSize: 24,
color: Colors.black,
),
),
color: Color(0xFFF7CA18),
),
],
),
),
),
);
다음은 다른 솔루션입니다.
Container(
height: MediaQuery.of(context).size.height * 0.10,
width: MediaQuery.of(context).size.width,
child: ButtonTheme(
minWidth: MediaQuery.of(context).size.width * 0.75,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(25.0),
side: BorderSide(color: Colors.blue)),
onPressed: () async {
// Do something
},
color: Colors.red[900],
textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Button Text,
style: TextStyle(fontSize: 24)),
),
),
),
),
여기 당신의 문제에 대한 코드가 있습니다. 상자 장식에 테두리 반경이 있는 간단한 용기만 가져가시면 됩니다.
new Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
color: Colors.blue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: new Text(
"Next",
style: new TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 15.0,
),
),
),
],
),
),
RaisedButton(
child: Text("Button"),
onPressed: (){},
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.red))
)
사용자 정의 보기를 만들어 제스처 디텍터 안에 넣어 단추처럼 작동하도록 할 수 있습니다. 사용자 정의 장식의 무한한 유형(지정된 반경으로 둥글게 만드는 것 포함)을 용기에 제공할 수 있다는 이점이 있습니다.
이제 둥근 버튼 클릭 및 오버레이를 수행할 수 있는 버튼이 있습니다. 그러나 배경색은 아직 사용할 수 없지만 다음과 같이 서클 아바타 위젯에서도 동일하게 사용할 수 있습니다.
CircleAvatar(
backgroundColor: const Color(0xffF4F3FA),
child: IconButton(
onPressed: () => FlushbarHelper.createInformation(
message: 'Work in progress...')
.show(context),
icon: Icon(Icons.more_vert),
),
),
다음을 사용할 수도 있습니다.
다음은 코드 예제입니다.
ButtonTheme(
minWidth: 200.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
child: RaisedButton(
elevation: 5.0,
hoverColor: Colors.green,
color: Colors.amber,
child: Text(
"Place Order",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () {},
),
),
둥근 단추를 만드는 가장 간단한 방법 중 하나는 를 사용한 다음 속성을 설정하여 둥근 단추를 지정하는 것입니다. 아래 코드를 따르십시오.
FlatButton(
padding: EdgeInsets.all(30.0),
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
child: child: Text(
"Button",
style: TextStyle(color: Colors.white),
),
onPressed: () {
print('Button pressed');
},
),
참고: 원형도를 변경하려면 내부 값을 조정하십시오.
Container(
width: yourWidth,
height: yourHeight ,
decoration: BoxDecoration(
borderRadius: radius,
gradient: yourGradient,
border: yourBorder),
child: FlatButton(
onPressed: {} (),
shape: RoundedRectangleBorder(borderRadius: radius),
.......
같은 반경을 사용합니다.
2020년 9월 이후, Flower 1.22.0:
"Raised Button"과 "Flat Button"은 더 이상 사용되지 않습니다.
가장 최신 솔루션은 다음과 같은 새 버튼을 사용하는 것입니다.
1. :
코드:
ElevatedButton(
child: Text("ElevatedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
primary: Colors.red,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
아이콘을 쉽게 추가할 수 있는 생성자도 있습니다.
ElevatedButton.icon(
icon: Icon(Icons.thumb_up),
label: Text("Like"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
2. :
코드:
OutlinedButton.icon(
icon: Icon(Icons.star_outline),
label: Text("OutlinedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.0, color: Colors.blue),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
3. :
윤곽선이나 색상 채우기를 원하지 않는 경우 언제든지 사용할 수 있습니다.
단추를 만드는 다른 방법은 다음과 같습니다.
상승 단추가 있는 상승 단추.styleFrom
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
onPressed: () {},
child:
Text("Buy now".toUpperCase(), style: TextStyle(fontSize: 14)),
),
단추 스타일이 있는 상승 단추
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
))),
onPressed: () {},
child: Text("Submit".toUpperCase()),
),
라운드 버튼의 실제 데모는 아래의 Dartpad 링크에서 확인할 수 있습니다.
DartPad의 둥근 단추 데모 예제
2021년에 작동하는 또 다른 멋진 솔루션:
TextButton(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text('Follow Us'.toUpperCase()),
),
style: TextButton.styleFrom(
backgroundColor: Colors.amber,
shadowColor: Colors.red,
elevation: 2,
textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),)
),
onPressed: () {
print('Pressed');
},
),
새 상승 버튼
스타일.
customElevatedButton({radius, color}) => ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius == null ? 100 : radius),
),
primary: color,
);
아이콘
Widget saveIcon() => iconsStyle1(
Icons.save,
);
// Common icon style
iconsStyle1(icon) => Icon(
icon,
color: white,
size: 15,
);
버튼 사용
ElevatedButton.icon(
icon: saveIcon(),
style:
customElevatedButton(color: Colors.green[700]),
label: Text('Save',
style: TextStyle(color: Colors.white)),
onPressed: () {
},
),
아래 코드 조각과 같이 컨테이너 위젯에서 텍스트 단추를 감습니다.
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black),
),
child: TextButton(
onPressed: () {
// To do
},
child: Text("Go to Change Language Screen "),
),
)
대신 사용하세요.
플랫 버튼, 레이즈드 버튼, 아웃라인 버튼과 같은 버튼은 2020년 10월 이후 더 이상 사용되지 않는다고 한다. 이것은 Fluter 개발 팀이 Fluter API를 단순화하고 일관성 있게 만들기 위한 노력 중 하나이며, 스타일 속성을 사용하여 스타일을 사용자 정의할 수 있습니다.
TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('Text here',
style: TextStyle(
color: Colors.teal,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
addButton() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: SizedBox(
height: 45,
width: 200,
child: ElevatedButton.icon(
onPressed: () async {},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
)),
elevation: MaterialStateProperty.all(1),
backgroundColor: MaterialStateProperty.all(Colors.blue),
),
icon: Icon(Icons.add, size: 18),
label: Text("Add question"),
),
),
),
],
);
}
상승된 단추에 이 스타일을 사용하여 원형으로 만들 수 있습니다.
style: ButtonStyle(
elevation: MaterialStateProperty.all(8.0),
backgroundColor:
MaterialStateProperty.all(Constants().orangeColor),
textStyle: MaterialStateProperty.all(
TextStyle(
fontSize: 16.0,
),
),
shape: MaterialStateProperty.all<CircleBorder>(
CircleBorder(),
),
shadowColor: MaterialStateProperty.all(Constants().orangeColor),
),
다음 코드를 사용할 수 있습니다.
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
),
child: Text("ok"),
)
만약 당신이 사용하고 싶다면,
이렇게 Given을 추가할 수 있습니다.
MaterialButton(
onPressed: () {},
minWidth: MediaQuery.of(context).size.width * 0.4,
height: 34,
color: colorWhite,
highlightColor: colorSplash,
splashColor: colorSplash,
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
side: BorderSide(
color: colorGrey,
width: 0.6,
),
),
child: Text("CANCEL"),
),
다른 방법으로는 적절한 반올림 단추에 부동 수행 단추를 사용하는 것입니다.
Scaffold(
appBar: AppBar(
title: const Text('Floating Action Button'),
),
body: const Center(child: Text('Press the button below!')),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
),
)
다음을 수행하십시오.
SizedBox(
height: 40.0,
child: MaterialButton(
child: Text("Button"),
color: Colors.blue,
disabledColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0), // Change your border radius here
),
),
onPressed: () {},
),
),
Flower 버전 2에서 이것을 사용해 보세요.
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
side:
BorderSide(width: 1.0, color: Colors.red,
borderRadius:
BorderRadius.circular(5.0),),),
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
elevation:
MaterialStateProperty.all<double>(8.0),
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
const EdgeInsets.symmetric(
horizontal: 15.0,
vertical: 10.0),),),
onPressed: (){},
child: Text('Button'),)
Null 안전 후에는 문서에서 말하는 것처럼 상승 단추가 감가 상각되므로 상승 단추가 아닌 상승 단추를 사용하십시오.
child: ElevatedButton(
onPressed: () {},
child: const Text('Add item to the list'),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Common.buttonColor),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
둥근 테두리 색상의 용기:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Text("Some Text"),
)
새 업데이트에서는 플러터가 지침을 사용합니다.
어느 것에 의하면.
Default Button
ElevatedButton(
onPressed: () {}, child: const Text("Default Button ")),
Button with Border Radius Zero
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.zero)),
onPressed: () {},
child: const Text("Border Radius Zero ")),
Button with custom border radius
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50))),
onPressed: () {},
child: const Text("Border Radius Custom ")),
참고: 에 동일한 논리를 사용할 수 있습니다.
단추 스타일은 참조하십시오.