从零开始学flutter-Button

前言

本篇文章主要着重记录一些按钮

正文

ElevatedButton

‘漂浮’按钮，它默认带有阴影和灰色背景。按下后，阴影会变大
代码如下

 ElevatedButton(
                onPressed: () {
                  //点击事件
                },
                child: const Center(
                  child: Text("ElevatedButton"),
                )),

TextButton

'文本'按钮，默认背景透明并不带阴影。按下后，会有背景色
代码如下

 TextButton(
                onPressed: () {
                //点击事件
                },
                child: const Center(
                  child: Text("TextButton"),
                )),

OutlinedButton

默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
代码如下

OutlinedButton(
                onPressed: () {
           //点击事件
                },
                child: const Center(
                  child: Text("OutlinedButton"),
                )),

IconButton

是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景
代码如下

 IconButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                      content: Text(
                          "IconButton pressed\n'是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景")));
                },
                icon: const Icon(Icons.adb_outlined)),

.icon

ElevatedButton,TextButton,OutlinedButton 均可以通过.icon的方式创建带有icon的按钮
代码如下

 ElevatedButton.icon(
              onPressed: () {
               
              },
              label: const Center(
                child: Text("带Icon的ElevatedButton"),
              ),
              icon: const Icon(Icons.send),
            ),
 TextButton.icon(
              onPressed: () {
        
              },
              label: const Center(
                child: Text("带Icon的TextButton"),
              ),
              icon: const Icon(Icons.send),
            ),
  OutlinedButton.icon(
              onPressed: () {
      
              },
              label: const Center(
                child: Text("带Icon的OutlinedButton"),
              ),
              icon: const Icon(Icons.send),
            ),

最后附上效果

效果图