在Flutter中,你可以使用ElevatedButton
或TextButton
来创建一个带有大小的按钮,并使用Icon
或IconTheme
来在按钮内部添加图标。以下是一个简单的示例,展示了如何实现这一点:
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('Flutter Button with Icon')),
body: Center(
child: IconButtonWithSize(),
),
),
);
}
}
class IconButtonWithSize extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 150.0, // 设置按钮的宽度
height: 50.0, // 设置按钮的高度
child: ElevatedButton(
onPressed: () {
// 按钮点击事件
print('Button pressed!');
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, size: 24.0), // 添加图标并设置大小
SizedBox(width: 8.0), // 图标和文字之间的间距
Text('Add'), // 按钮上的文字
],
),
),
);
}
}
如果在添加图标时遇到问题,可能是由于以下原因:
material.dart
库。解决方法:
import 'package:flutter/material.dart';
Icons.add
而不是错误的名称。size
属性调整图标大小以适应按钮。通过上述代码示例和解释,你应该能够在Flutter中成功添加一个带有大小的按钮并在其内部添加图标。
领取专属 10元无门槛券
手把手带您无忧上云