前言
Flutter的ElevatedButton是一个很重要的Button组件，想要设置ElevatedButton的宽高有两种方式，
1.直接通过SizeBox进行设置
2.通过ElevatedButton的style属性进行设置
默认情况下ElevatedButton高度是固定的，宽度会跟随child内容的大小自动调整。
我们将新建Flutter项目时的默认模板稍微改一下来作为我们本篇文章的demo模板。
dart
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text("默认情况下的宽高")),
],
),
),
),
);
}
}设置固定宽高
使用SizeBox
直接使用SizeBox来设置宽高跟其他的控件方式是一致的，不赘述。
dart
SizedBox(
width: 330,
height: 50,
child: ElevatedButton(
onPressed: () {},
child: const Text("设置固定宽高(使用SizeBox)"),
),
),使用ElevatedButton的style属性
直接使用ButtonStyle
ElevatedButton有一个style参数，可以设置Button相关的外观。style类型为ButtonStyle?，默认为null。
在style里设置了相应的参数之后，会有最高优先级。
设置Button大小的参数有3个，minimumSize(最小的Size)，maximumSize(最大的Size)，fixedSize(固定的Size)。
一般来说，我们设置fixedSize就可以了。
dart
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(const Size(330, 50)),
),
child: const Text("设置固定宽高(使用ButtonStyle)"),
),使用ElevatedButton.styleFrom
上面使用ButtonStyle有一个比较坑爹的地方，就是ButtonStyle的属性大多是MaterialStateProperty类型，需要使用MaterialStateProperty.all()封装后才能使用。所以用起来比较麻烦。使用ElevatedButton.styleFrom()的方式来生成ButtonStyle会更加方便，因为Flutter已经为我们做了MaterialStateProperty封装了，我们直接设置就可以。
dart
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: const Size(330, 50),
),
child: const Text("设置固定宽高(使用ElevatedButton.styleFrom)"),
),只设置宽度,高度默认
使用SizeBox
dart
SizedBox(
width: 330,
child: ElevatedButton(
onPressed: () {},
child: const Text("只设置宽度,高度默认(SizeBox)"),
),
),使用ElevatedButton的style属性
这个只需要设置Size的width，而height设置为double.infinity即可。
Size.fromWidth(330)和Size(330, double.infinity)是一样的效果。
less
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromWidth(330),
),
child: const Text("只设置宽度,高度默认(style)"),
),只设置高度,宽度默认
使用SizeBox
dart
SizedBox(
height: 50,
child: ElevatedButton(
onPressed: () {},
child: const Text("只设置高度,宽度默认(SizeBox)"),
),
),使用ElevatedButton的style属性
dart
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromHeight(50),
),
child: const Text("只设置高度,宽度默认(style)"),
),宽度占满，高度默认
使用SizeBox
dart
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text("宽度占满，高度默认(SizeBox)"),
),
),使用ElevatedButton的style属性
这个不能直接将width设置成double.infinity,因为设置之后是没有效果的。
正确的方式是设置一个较大的width，要大于占满时的宽度。
dart
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text("宽度占满，高度默认(SizeBox)"),
),
),去掉Button边距
默认情况下ElevatedButton的内容是有边距的。如果不想要这个边距，可以设置下述的方式进行处理。
dart
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
minimumSize: Size.zero,
padding: EdgeInsets.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: const Text("去掉Button边距"),
),Demo
dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const SizedBox(height: 3),
ElevatedButton(onPressed: () {}, child: const Text("默认情况下的宽高")),
const SizedBox(height: 3),
SizedBox(
width: 330,
height: 50,
child: ElevatedButton(
onPressed: () {},
child: const Text("设置固定宽高(使用SizeBox)"),
),
),
const SizedBox(height: 3),
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(const Size(330, 50)),
),
child: const Text("设置固定宽高(使用ButtonStyle)"),
),
const SizedBox(height: 3),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: const Size(330, 50),
),
child: const Text("设置固定宽高(使用ElevatedButton.styleFrom)"),
),
const SizedBox(height: 3),
SizedBox(
width: 330,
child: ElevatedButton(
onPressed: () {},
child: const Text("只设置宽度,高度默认(SizeBox)"),
),
),
const SizedBox(height: 3),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromWidth(330),
),
child: const Text("只设置宽度,高度默认(style)"),
),
const SizedBox(height: 3),
SizedBox(
height: 50,
child: ElevatedButton(
onPressed: () {},
child: const Text("只设置高度,宽度默认(SizeBox)"),
),
),
const SizedBox(height: 3),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromHeight(50),
),
child: const Text("只设置高度,宽度默认(style)"),
),
const SizedBox(height: 3),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text("宽度占满，高度默认(SizeBox)"),
),
),
const SizedBox(height: 3),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromWidth(10000),
),
child: const Text("宽度占满，高度默认(style)"),
),
const SizedBox(height: 3),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
minimumSize: Size.zero,
padding: EdgeInsets.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: const Text("去掉Button边距"),
),
],
),
),
),
);
}
}