526互联

15、Flutter 按钮组件

发布时间 2023-11-21 13:47:41作者: 鲤斌

按钮组件的属性

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("注册 配置边框")),
          ),
        )
      ],
    );
  }
}