Flutter——按钮

• 按钮

         普通按钮
         ElevatedButton(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.cyanAccent), // 背景色
                  foregroundColor: MaterialStateProperty.all(Colors.white)),  //文字图标颜色
              onPressed: () {},
              child: const Text("凸起按钮")),
         文字按钮
          TextButton(onPressed: () {}, child: const Text("文本按钮")),
         边框按钮
          OutlinedButton(onPressed: () {}, child: const Text("边框按钮")),
         图标按钮
          IconButton(onPressed: () {}, icon: const Icon(Icons.abc_sharp)),
         普通按钮带图标
          ElevatedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.send),
              label: const Text("发送")),
         文字按钮带图标
          TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.send),
              label: const Text("发送")),
         边框按钮带图标
          OutlinedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.send),
              label: const Text("发送")),
              
         圆角按钮
        ElevatedButton(
            style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.amber),
            shape: MaterialStateProperty.all(RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(20)))),
       onPressed: () {},
       child: const Text("圆角"))
       圆形按钮
        Container(
          height: 60,
          width: 60,
          child: ElevatedButton(
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.amber),
          shape: MaterialStateProperty.all(const CircleBorder(
              side: BorderSide(width: 3,color: Colors.yellow)))),
      onPressed: () {},
      child: const Text("圆形")),
      修改带边框的按钮
      OutlinedButton(
                onPressed: () {},
                style: ButtonStyle(
                    side: MaterialStateProperty.all(
                        const BorderSide(width: 6, color: Colors.red))),
                child: const Text("带边框的按钮"),
              )
      )
      
      自定义按钮
      
        body:  MyBody("第01集",onPressed:(){}),
        );
      }
        }

    class MyBody extends StatelessWidget {
      String text;
      void  Function() ?onPressed;
       MyBody(this.text,{super.key,required this.onPressed});

      @override
      Widget build(BuildContext context) {
        return ElevatedButton(
        style: ButtonStyle(
            backgroundColor:
                MaterialStateProperty.all(Color.fromRGBO(245, 246, 248, 1)),
            foregroundColor: MaterialStateProperty.all(Colors.black)),
        onPressed: onPressed,
        child:  Text(
          text,
          style: TextStyle(fontSize: 20),
        ));
      }
    }

• wrap 组件

 Wrap(
            spacing: 20, //水平间距
            runSpacing: 10, //垂直间距
            alignment: WrapAlignment.center,