随笔 - 210  文章 - 0 评论 - 0 阅读 - 61532
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

按钮组件的属性

ButtonStylee里面的常用的参数

 

ElevatedButton

ElevatedButton 即"凸起"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大
复制代码
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ElevatedButton(
        onPressed: (){},
        child:  Text("普通按钮"),)
    );
  }
}
复制代码

TextButton

TextButton 即文本按钮,默认背景透明并不带阴影。按下后,会有背景色
复制代码
class MyApp1 extends StatelessWidget {
  const MyApp1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextButton(
        onPressed: (){},
        child:  Text("文本按钮"),)
    );
  }
}
复制代码

OutlinedButton

OutlineButton 默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和
阴影
复制代码
class MyApp2 extends StatelessWidget {
  const MyApp2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: OutlinedButton(
        onPressed: (){},
        child:  Text("边框按钮"),)
    );
  }
}
复制代码

IconButton

IconButton 是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景
复制代码
class MyApp3 extends StatelessWidget {
  const MyApp3({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: IconButton(
        onPressed: (){},
        icon:  Icon(Icons.abc_rounded))
    );
  }
}
复制代码

带图标的按钮

ElevatedButton 、 TextButton 、 OutlineButton 都有一个 icon 构造函数,通过它可以轻松创建
带图标的按钮
复制代码
class MyApp4 extends StatelessWidget {
  const MyApp4({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      ElevatedButton.icon(
        icon: Icon(Icons.send),
        label: Text("发送"),
        onPressed: () {},
      ),
      TextButton.icon(
          onPressed: () {},
          icon: Icon(Icons.access_alarm_outlined),
          label: Text("确定")),
      OutlinedButton.icon(
          onPressed: () {},
          icon: Icon(Icons.access_time_filled_sharp),
          label: Text("增加"))
    ]);
  }
}
复制代码

修改按钮的宽度高度

复制代码
class MyApp5 extends StatelessWidget {
  const MyApp5({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 80,
      width: 200,
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(const Color.fromARGB(255, 86, 244, 54)), //按扭背景颜色
            foregroundColor: MaterialStateProperty.all(Colors.black)), //字体颜色
        onPressed: () {},
        child: Text("宽度高度"),
      ),
    );
  }
}
复制代码

自适应按钮

复制代码
class MyApp7 extends StatelessWidget {
  const MyApp7({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Container(
              color: Colors.green,
              height: 80,
margin: EdgeInsets.all(10), child: ElevatedButton( child:
const Text('自适应按钮'), onPressed: () { print("自适应按钮"); })), ) ], ); } }
复制代码

配置圆形圆角按钮

圆角按钮
复制代码
class MyApp8 extends StatelessWidget {
  const MyApp8({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(
                  const Color.fromARGB(255, 33, 243, 61)), //背景颜色
              foregroundColor: MaterialStateProperty.all(
                  const Color.fromARGB(255, 255, 255, 255)), //字体或者图标颜色
              elevation: MaterialStateProperty.all(24), //是用来设置Material或Widget的阴影效果的  elevation的值是介于0到24之间的浮点数
              shape: MaterialStateProperty.all( //圆角
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10))),
            ),
            onPressed: () {
              print("圆角按钮");
            },
            child: const Text('圆角')));
  }
}
复制代码
圆形按钮
复制代码
class MyApp8 extends StatelessWidget {
  const MyApp8({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80,
        child: ElevatedButton(
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(
                    const Color.fromARGB(255, 33, 243, 61)), //按钮背景颜色
                foregroundColor: MaterialStateProperty.all(
                    const Color.fromARGB(255, 255, 255, 255)), //字体或者图标颜色
                elevation: MaterialStateProperty.all(
                    24), //是用来设置Material或Widget的阴影效果的  elevation的值是介于0到24之间的浮点数
                shape: MaterialStateProperty.all(
                  CircleBorder(side: BorderSide(color: Colors.white)),
                )),
            onPressed: () {
              print("圆形按钮");
            },
            child: const Text('圆形按钮')));
  }
}
复制代码

修改OutlinedButton边框

复制代码
class MyApp9 extends StatelessWidget {
  const MyApp9({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Container(
            margin: EdgeInsets.all(20),
            height: 50,
            child: OutlinedButton(
                style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(Colors.black),
                    side: MaterialStateProperty.all(  //边框颜色
                        const BorderSide(width: 1, color: Color.fromARGB(255, 54, 244, 95)))),
                onPressed: () {},
                child: const Text("注册 配置边框")),
          ),
        )
      ],
    );
  }
}
复制代码

 

posted on   鲤斌  阅读(171)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示