Flutter学习笔记11-5分钟快速上手按钮组件ElevatedButton、TextButton、OutlinedButton、IconButton

视频学习地址：https://www.bilibili.com/video/BV1S4411E7LY?p=30&vd_source=cee744cae4ead27f8193fc7904647073

学习笔记：
本片主要是学习了四个按钮的使用，先放上整个页面的代码

import 'dart:ffi';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Demo"),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(onPressed: () {}, child: const Text("普通按钮")),
            TextButton(onPressed: () {}, child: const Text("文本按钮")),
            OutlineButton(
              onPressed: () {},
              child: const Text("边框按钮"),
            ),
            IconButton(icon: Icon(Icons.ac_unit), onPressed: null),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            ElevatedButton.icon(
                onPressed: null,
                icon: Icon(Icons.ac_unit),
                label: Text("send")),
            TextButton.icon(
                onPressed: null,
                icon: Icon(Icons.ac_unit),
                label: Text("receive")),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.yellow),
                    foregroundColor: MaterialStateProperty.all(Colors.red)),
                onPressed: () {
                  print("ElevatedButton");
                },
                child: Text("打印"))
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 50,
              width: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("big button"),
              ),
            ),
            SizedBox(
              height: 30,
              width: 170,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("big button2"),
              ),
            )
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  margin: EdgeInsets.all(10),
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("long button"),
                  ),
                ))
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text("圆角按钮"),
              style: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10))),
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("圆形按钮"),
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(CircleBorder(
                        side: BorderSide(width: 2, color: Colors.green)))),
              ),
            )
          ],
        )
      ],
    );
  }
}

来看效果

整体分析
我在MyHomePage中返回了一个ListView,不用Column的原因是，防止内容过长不能滑动。
之后每个都是一个Row
第一行

Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(onPressed: () {}, child: const Text("普通按钮")),
            TextButton(onPressed: () {}, child: const Text("文本按钮")),
            OutlineButton(
              onPressed: () {},
              child: const Text("边框按钮"),
            ),
            IconButton(icon: Icon(Icons.ac_unit), onPressed: null),
          ],
        )

分别使用了一下四种按钮

注意我是如何设置间距的：mainAxisAlignment: MainAxisAlignment.spaceAround,

第二行

Row(
          children: [
            ElevatedButton.icon(
                onPressed: null,
                icon: Icon(Icons.ac_unit),
                label: Text("send")),
            TextButton.icon(
                onPressed: null,
                icon: Icon(Icons.ac_unit),
                label: Text("receive")),
          ],
        ),

效果

使用的是x x xButton.icon的方式展示按钮，和第一行的属性不一样

第三行

Row(
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.yellow),
                    foregroundColor: MaterialStateProperty.all(Colors.red)),
                onPressed: () {
                  print("ElevatedButton");
                },
                child: Text("打印"))
          ],
        ),

效果

只有一个按钮，这里我们主要是设置一下按钮的style属性，使用ButtonStyle，可以设置字体颜色和背景颜色。
我们还在给onPressed()设置了一个点击事件，在控制台输出字符串“ElevatedButton”

第四行

Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 50,
              width: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("big button"),
              ),
            ),
            SizedBox(
              height: 30,
              width: 170,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("big button2"),
              ),
            )
          ],
        ),

本行主要是教大家如何设置按钮大小，要在按钮外套一层Container或者SizedBox
显示效果

第5行

Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  margin: EdgeInsets.all(10),
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("long button"),
                  ),
                ))
          ],
        ),

本行是想写一个按钮自适应屏幕，Expended套Container套ElevaterButton
Container是为了设置margin才写的，如果不需要边距，就不用套container了

第六行：设置圆角、圆形按钮

Row(
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text("圆角按钮"),
              style: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10))),
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("圆形按钮"),
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(CircleBorder(
                        side: BorderSide(width: 2, color: Colors.green)))),
              ),
            )
          ],
        )

显示效果

这部分最重要的是style属性
通过设置style，使用ButtonStyle的shape属性，控制按钮的形状。