在Flutter 2中,你可以使用多种方法创建带有图标和文本的按钮。最常用的方法是使用TextButton
、ElevatedButton
或OutlinedButton
,并结合Row
和Icon
小部件来实现这一功能。
以下是一些示例代码,展示了如何创建带有图标和文本的按钮。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('TextButton with Icon and Text'),
),
body: Center(
child: TextButton.icon(
onPressed: () {
// 按钮点击事件处理
print('TextButton clicked');
},
icon: Icon(Icons.add),
label: Text('Add'),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ElevatedButton with Icon and Text'),
),
body: Center(
child: ElevatedButton.icon(
onPressed: () {
// 按钮点击事件处理
print('ElevatedButton clicked');
},
icon: Icon(Icons.add),
label: Text('Add'),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('OutlinedButton with Icon and Text'),
),
body: Center(
child: OutlinedButton.icon(
onPressed: () {
// 按钮点击事件处理
print('OutlinedButton clicked');
},
icon: Icon(Icons.add),
label: Text('Add'),
),
),
),
);
}
}
如果你需要更多的自定义选项,可以使用Row
、Icon
和Text
小部件来创建自定义按钮:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom Button with Icon and Text'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 按钮点击事件处理
print('Custom Button clicked');
},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.add),
SizedBox(width: 8.0),
Text('Add'),
],
),
),
),
),
);
}
}
领取专属 10元无门槛券
手把手带您无忧上云