如何在Flutter中设计ElevatedButton的样式

423 阅读1分钟

ElevatedButton取代了Flutter中旧的RaisedButton widget,其API也有所不同。以下是如何使用它。

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.black, // background (button) color
    onPrimary: Colors.white, // foreground (text) color
  ),
  onPressed: () => print('pressed'),
  child: const Text('Add to Cart'),
)

想在你的应用程序中的所有ElevatedButtons中重复使用相同的样式?

只需在MaterialApp 内设置ThemeData.elevatedButtonTheme

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.black, // background (button) color
        onPrimary: Colors.white, // foreground (text) color
      ),
    ),
  ),
)

注意:有很多属性你可以进行样式设计。请查看 ButtonStyle获取更多信息。

编码愉快!