ElevatedButton凸起按钮1.简单使用ElevatedButton( //按钮点击事件 onPressed: (){ print(按钮被点击); }, // style: ElevatedButton.styleFrom( // backgroundColor: Colors.blue, // 背景色 // foregroundColor: Colors.white, // 文字颜色 // elevation: 5, // 阴影高度 // minimumSize: Size(20, 50), // 最小尺寸 // padding: EdgeInsets.all(16), // 内边距 // shape: RoundedRectangleBorder( // 形状 // borderRadius: BorderRadius.circular(10), // ), // ), child: Text(点击我) )2.带图标//带图标的按钮 child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ // 图标文字按钮 ElevatedButton.icon( onPressed: () {}, icon: Icon(Icons.download), label: Text(下载), ), // 纯图标按钮 IconButton( onPressed: () print(图标按钮点击), icon: Icon(Icons.settings), tooltip: 设置, // 长按提示 ), ], ),TextButton文本按钮未点击的时候只显示文本点击的时候显示背景颜色TextButton( //按钮点击事件 onPressed: (){ print(按钮被点击); }, //按钮风格设置 // style: TextButton.styleFrom( // foregroundColor: Colors.red,//文字/图标颜色 // backgroundColor: Colors.grey[200],//背景色 // padding: EdgeInsets.all(16),//内边距 // shape: RoundedRectangleBorder( // 形状 // borderRadius: BorderRadius.circular(8), // ), // ), child: Text(文本按钮) )IconButton图标按钮使用场景当要给小的按钮设置点击事件的时候不应该在按钮本身加点击事件GestureDetector而是应该使用IconButton因为这个控件有点击范围且点击范围比按钮本身大IconButton( //按钮点击事件 onPressed: (){ print(按钮被点击); }, icon:Image.asset(assets/images/apple.png,width: 20,height: 20,) )如果需要图标旋转角度的时候需要使用Transform.rotateTransform.rotate( angle: 45 * 3.1415926/180, //旋转45° child:Icon(Icons.navigation_outlined,color: Color(0xFFAACD06),), )
