修改flutter ElevatedButton的样式(ElevatedButton.styleFrom/ButtonStyle)

有两种方式可以实现ElevatedButton的样式的修改

使用 ElevatedButton.styleFrom

 ElevatedButton.styleFrom({
           Color primary, // set the background color 
           Color onPrimary, 
           Color onSurface, 
           Color shadowColor, 
           double elevation, 
           TextStyle textStyle, 
           EdgeInsetsGeometry padding, 
           Size minimumSize, 
           BorderSide side, 
           OutlinedBorder shape, 
           MouseCursor enabledMouseCursor, 
           MouseCursor disabledMouseCursor, 
           VisualDensity visualDensity, 
           MaterialTapTargetSize tapTargetSize, 
           Duration animationDuration, 
           bool enableFeedback
     })

styleFrom例子:

ElevatedButton(
           child: Text('Button'),
           onPressed: () {},
           style: ElevatedButton.styleFrom(
               primary: Colors.purple,
               padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
               textStyle: TextStyle(
               fontSize: 30,
               fontWeight: FontWeight.bold)),
)

使用 ButtonStyle

ButtonStyle({
  MaterialStateProperty<TextStyle> textStyle,    
  MaterialStateProperty<Color> backgroundColor,   
  MaterialStateProperty<Color> foregroundColor, 
  MaterialStateProperty<Color> overlayColor, 
  MaterialStateProperty<Color> shadowColor, 
  MaterialStateProperty<double> elevation, 
  MaterialStateProperty<EdgeInsetsGeometry> padding, 
  MaterialStateProperty<Size> minimumSize, 
  MaterialStateProperty<BorderSide> side, 
  MaterialStateProperty<OutlinedBorder> shape, 
  MaterialStateProperty<MouseCursor> mouseCursor,    
  VisualDensity visualDensity, 
  MaterialTapTargetSize tapTargetSize, 
  Duration animationDuration, 
  bool enableFeedback
})

ButtonStyle例子:

	ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),
                padding: MaterialStateProperty.all(EdgeInsets.all(50)),
                textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30))),
	)

你可能感兴趣的:(Flutter,flutter)