Flutter 之 CupertinoButton （iOS 风

CupertinoButton 是 flutter 提供的一个 iOS 风格的 button，自带一个 Radius.circular(8.0) 的圆角

1. CupertinoButton

CupertinoButton 定义

  const CupertinoButton({
    Key? key,
    required this.child,
    this.padding,
    this.color,
    this.disabledColor = CupertinoColors.quaternarySystemFill,
    this.minSize = kMinInteractiveDimensionCupertino,
    this.pressedOpacity = 0.4,
    this.borderRadius = const BorderRadius.all(Radius.circular(8.0)),
    this.alignment = Alignment.center,
    required this.onPressed,
  })

CupertinoButton 属性

2. 示例

class MSCupertinoButtonDemo1 extends StatelessWidget {
  const MSCupertinoButtonDemo1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(middle: Text("iOS 风格")),
      child: Padding(
        padding: EdgeInsets.only(top: 64), // 避免导航栏遮住内容
        child: Center(
          child: Column(
            children: [
              CupertinoButton(
                padding: EdgeInsets.all(12), // 内间距
                child: Text("Normal CupertinoButton"), // 子部件
                color: Colors.amber, // 按钮颜色
                alignment: Alignment.center, // 对齐方式
                pressedOpacity: 0.5, // 按压下去时 button 透明度
                disabledColor: Colors.grey, // 不可交互时颜色，onPressed == null 时显示
                borderRadius: BorderRadius.circular(16),
                onPressed: () {}, // 点击事件
              ),
              SizedBox(height: 20),
              CupertinoButton(
                child: Text("Disable CupertinoButton"),
                color: Colors.pink,
                disabledColor: Colors.grey,
                alignment: Alignment.center,
                onPressed: null,
              ),
              SizedBox(height: 20),
              CupertinoButton(
                color: Colors.green[200],
                padding: EdgeInsets.symmetric(horizontal: 20), // 内边距
                minSize: 80, // 可以控制按钮的高度 宽度
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.radio_button_checked),
                    SizedBox(width: 20),
                    Text("CupertinoButton"),
                  ],
                ),
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}