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

淡淡的烟草味﹌ 2022-10-17 11:29 7阅读 0赞

## 有两种方式可以实现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))),
    	)