likes
comments
collection
share

Flutter-ElevatedButton宽高设置

作者站长头像
站长
· 阅读数 48

前言

Flutter的ElevatedButton是一个很重要的Button组件，想要设置ElevatedButton的宽高有两种方式， 1.直接通过SizeBox进行设置 2.通过ElevatedButton的style属性进行设置

默认情况下ElevatedButton高度是固定的，宽度会跟随child内容的大小自动调整。

我们将新建Flutter项目时的默认模板稍微改一下来作为我们本篇文章的demo模板。

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("默认情况下的宽高")),
            ],
          ),
        ),
      ),
    );
  }
}

设置固定宽高

Flutter-ElevatedButton宽高设置

使用SizeBox

直接使用SizeBox来设置宽高跟其他的控件方式是一致的，不赘述。

SizedBox(
  width: 330,
  height: 50,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text("设置固定宽高(使用SizeBox)"),
  ),
),

使用ElevatedButton的style属性

直接使用ButtonStyle

ElevatedButton有一个style参数，可以设置Button相关的外观。style类型为ButtonStyle?，默认为null。

在style里设置了相应的参数之后，会有最高优先级。

Flutter-ElevatedButton宽高设置 设置Button大小的参数有3个，minimumSize(最小的Size)，maximumSize(最大的Size)，fixedSize(固定的Size)。

一般来说，我们设置fixedSize就可以了。

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封装了，我们直接设置就可以。

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    fixedSize: const Size(330, 50),
  ),
  child: const Text("设置固定宽高(使用ElevatedButton.styleFrom)"),
),

只设置宽度,高度默认

Flutter-ElevatedButton宽高设置

使用SizeBox

SizedBox(
  width: 330,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text("只设置宽度,高度默认(SizeBox)"),
  ),
),

使用ElevatedButton的style属性

这个只需要设置Size的width，而height设置为double.infinity即可。

Size.fromWidth(330)和Size(330, double.infinity)是一样的效果。

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    fixedSize: const Size.fromWidth(330),
  ),
  child: const Text("只设置宽度,高度默认(style)"),
),

只设置高度,宽度默认

Flutter-ElevatedButton宽高设置

使用SizeBox

SizedBox(
  height: 50,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text("只设置高度,宽度默认(SizeBox)"),
  ),
),

使用ElevatedButton的style属性

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    fixedSize: const Size.fromHeight(50),
  ),
  child: const Text("只设置高度,宽度默认(style)"),
),

宽度占满，高度默认

Flutter-ElevatedButton宽高设置

使用SizeBox

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text("宽度占满，高度默认(SizeBox)"),
  ),
),

使用ElevatedButton的style属性

这个不能直接将width设置成double.infinity,因为设置之后是没有效果的。

正确的方式是设置一个较大的width，要大于占满时的宽度。

ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
        fixedSize: const Size.fromWidth(10000),
    ),
    child: const Text("宽度占满，高度默认(style)"),
),

去掉Button边距

Flutter-ElevatedButton宽高设置 默认情况下ElevatedButton的内容是有边距的。如果不想要这个边距，可以设置下述的方式进行处理。

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    minimumSize: Size.zero,
    padding: EdgeInsets.zero,
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
  child: const Text("去掉Button边距"),
),

Demo

Flutter-ElevatedButton宽高设置

点击显示示例代码 
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边距"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

创作不易，觉得有收获的话点个赞鼓励下呗~

转载自:https://juejin.cn/post/7287914073314983991
评论
请登录