面试题：Flutter中如何自定义CupertinoButton样式

Question

在Flutter的Cupertino组件库中，CupertinoButton是常用的按钮组件。请阐述如何自定义CupertinoButton的外观，例如改变按钮的背景颜色、文本颜色以及按下时的效果，同时说明在自定义过程中涉及到的关键属性和方法。

Answer 1

改变背景颜色

在CupertinoButton中，可以通过color属性来改变按钮的背景颜色。示例代码如下：

CupertinoButton(
  color: Colors.blue, // 设置背景颜色为蓝色
  onPressed: () {},
  child: Text('按钮'),
)

改变文本颜色

文本颜色可以通过child属性内的Text组件的style来设置。示例如下：

CupertinoButton(
  onPressed: () {},
  child: Text(
    '按钮',
    style: TextStyle(color: Colors.white), // 设置文本颜色为白色
  ),
)

改变按下时的效果

CupertinoButton按下时的效果主要通过pressedOpacity属性来控制，该属性定义了按钮按下时的透明度。默认值为0.2。示例如下：

CupertinoButton(
  pressedOpacity: 0.5, // 按下时透明度为0.5
  onPressed: () {},
  child: Text('按钮'),
)

关键属性总结

• color：用于设置按钮的背景颜色。
• pressedOpacity：控制按钮按下时的透明度，以此改变按下时的视觉效果。
• 在child属性内的Text组件的style用于设置按钮文本的样式，包括文本颜色等。