Flutter---Button

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.rotate

Transform.rotate( angle: 45 * 3.1415926/180, //旋转45° child:Icon(Icons.navigation_outlined,color: Color(0xFFAACD06),), )