Flutter入门（47）：Flutter 组件之 CupertinoButton 详解

1. 基本介绍

CupertinoButton 是 flutter 提供的一个 iOS 风格的 button，自带一个 Radius.circular(8.0) 的圆角，其实在 flutter 的应用中，不比太过纠结是哪一端风格的 button 使用起来都一样的。

CupertinoButton.png

Flutter入门（12）：Flutter 组件之 RaisedButton 详解
Flutter入门（22）：Flutter 组件之 FlatButton 详解

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

CupertinoButton 属性	介绍
child	@required 子控件
padding	button 内间距
color	button 颜色
disabledColor	不可交互时颜色，onPressed == null 时显示，默认为 CupertinoColors.quaternarySystemFill
minSize	最小可点击大小，默认为 kMinInteractiveDimensionCupertino
pressedOpacity	按压下去时 button 透明度，默认为 0.4
borderRadius	圆角，默认为 const BorderRadius.all(Radius.circular(8.0))
onPressed	@required 点击事件

4. CupertinoButton 详解

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FMCupertinoButtonVC extends StatefulWidget{
  @override
  FMCupertinoButtonState createState() => FMCupertinoButtonState();
}

class FMCupertinoButtonState extends State  {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("CupertinoActivityIndicator"),
      ),
      child: _safeArea(),
    );
  }

  SafeArea _safeArea(){
    return SafeArea(child: _column());
  }

  Column _column(){
    return Column(
      children: [
        Padding(padding: EdgeInsets.all(20)),
        Container(
          alignment: Alignment.center,
          child: _cupertinoButton(),
          width: 210,
        ),
        Padding(padding: EdgeInsets.all(20)),
        Container(
          alignment: Alignment.center,
          child: _disabledButton(),
        ),
      ],
    );
  }

  CupertinoButton _cupertinoButton(){
    return CupertinoButton(
      // 子控件
      child: Row(
        children: [
          Icon(Icons.radio_button_checked),
          Padding(padding: EdgeInsets.all(5)),
          Text("CupertinoButton"),
        ],
      ),
      color: Colors.red, // button 颜色
      padding: EdgeInsets.all(20), // button 内边距
      disabledColor: Colors.grey, // 不可交互时颜色，onPressed == null 时显示
      // 点击事件
      onPressed: (){
        print("onPressed");
      },
    );
  }

  CupertinoButton _disabledButton(){
    return CupertinoButton(
      child: Text("DisabledButton"), // 子控件
      color: Colors.red, // button 颜色
      disabledColor: Colors.grey, // 不可交互时颜色，onPressed == null 时显示
      padding: EdgeInsets.all(20),
      onPressed: null,
      borderRadius: BorderRadius.circular(15),
    );
  }
}

CupertinoButton.gif

5. 技术小结

Flutter 中各个风格的 button 使用方法基本一致，只是会带一些默认属性而已。