[英]How to Create Elevated Button with Icon and Text in Flutter
如何使用最新的按钮小部件 ElevatedButton 创建具有文本和图标的按钮。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Elevated Button',
home: FlutterExample(),
);
}
}
class FlutterExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Elevated Button with Icon and Text')),
body: Center(
child: ElevatedButton.icon(
icon: Icon(
Icons.home,
color: Colors.green,
size: 30.0,
),
label: Text('Elevated Button'),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
)));
}
}
在这种情况下,您可以添加具有多个子项的Row()
或Wrap()
小部件Icon()
和Text()
ElevatedButton(
onPressed:() {},
child: Wrap(
children: <Widget>[
Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
),
SizedBox(
width:10,
),
Text("Click me!", style:TextStyle(fontSize:20)),
],
),
),
您可以使用ElevatedButton.icon构造函数:
ElevatedButton.icon(
onPressed: () {
//OnPressed Logic
},
icon: const Icon(Icons.plus_one),
label: const Text(
"Button Text"
)
),
您可以为此使用 ElevatedButton.icon 构造函数
ElevatedButton.icon(
icon: const Icon(Icons.add, size: 18),
label: Text('My elevated button'),
onPressed: () {},
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.