ButtonTheme对RaisedButton生效但对ElevatedButton无效该如何配置?
解决方案
Flutter 2.0 之后推出的ElevatedButton、TextButton、OutlinedButton等新按钮组件,不再适配旧的ButtonThemeData配置,需要使用对应按钮专属的主题配置项实现样式统一。
- 全局配置(整个应用的
ElevatedButton都生效)
配置位置在MaterialApp的theme属性中,新增elevatedButtonTheme配置项,示例代码如下:
MaterialApp( theme: ThemeData( // 原有针对旧RaisedButton的配置可保留也可删除 buttonTheme: ButtonThemeData( buttonColor: Colors.green.withAlpha(125), ), // ElevatedButton 全局主题配置 elevatedButtonTheme: ElevatedButtonThemeData( style: ButtonStyle( // 配置默认背景色 backgroundColor: MaterialStateProperty.all(Colors.green.withAlpha(125)), // 可按需添加其他样式配置,比如文字颜色、圆角、内边距等 foregroundColor: MaterialStateProperty.all(Colors.white), shape: MaterialStateProperty.all(RoundedRectangleBorder( borderRadius: BorderRadius.circular(8) )), padding: MaterialStateProperty.all(const EdgeInsets.symmetric(horizontal: 16, vertical: 10)), ), ), ), home: const MyHomePage(), );
- 局部配置(仅单个页面/部分组件范围内生效)
使用ElevatedButtonTheme组件包裹对应生效范围的组件即可,示例代码如下:
ElevatedButtonTheme( data: ElevatedButtonThemeData( style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.green.withAlpha(125)), ), ), child: Column( children: [ ElevatedButton(onPressed: (){}, child: const Text("按钮1")), ElevatedButton(onPressed: (){}, child: const Text("按钮2")), ], ), )
如果需要适配按钮不同交互状态(按下、禁用、悬停等)的样式差异,可以使用MaterialStateProperty.resolveWith方法配置,示例如下:
backgroundColor: MaterialStateProperty.resolveWith((states) { // 按下状态颜色 if (states.contains(MaterialState.pressed)) { return Colors.green.withAlpha(200); } // 禁用状态颜色 if (states.contains(MaterialState.disabled)) { return Colors.grey.withAlpha(150); } // 默认状态颜色 return Colors.green.withAlpha(125); }),
内容的提问来源于stack exchange,提问作者rozerro
相关产品推荐
相关产品推荐

