Cupertino文本按钮

pub version CodeFactor

一个看起来像Cupertino文本按钮的按钮！

example

文本按钮

一个简单的文本按钮可以这样创建

CupertinoTextButton(
    text: 'Apply',
    style: const TextStyle(fontSize: 20),
    onTap: () {
        // Do your text stuff here.
    },
),

对于文本按钮，您可以配置以下属性

属性 类型 描述
text 字符串 按钮的标题
style TextStyle 标题的文本样式
textAlign TextAlign 按钮的文本对齐方式
textDirection 文本方向 用于渲染文本的文本方向
textOverflow 文本溢出 用于渲染文本的文本方向
softWrap 布尔值 文本是否应在软换行处断开

Material图标按钮

一个简单的Material图标按钮可以这样创建

CupertinoTextButton.materialIcon(
    icon: Icons.chevron_left,
    size: 30,
    onTap: () {
        // Do your icon stuff here.
    },
),

对于Material图标按钮，您可以配置以下属性

属性 类型 描述
icon IconData 要显示的图标
size 双精度 图标的大小
textDirection 文本方向 用于渲染图标的文本方向

通用属性

无论您是创建文本按钮还是图标按钮，都可以指定这些属性

属性 类型 描述
onTap 功能 按钮的点击处理程序
onLongPress 功能 按钮的长按处理程序
normalColor 颜色 按钮在正常状态下的前景色，例如未按下
pressedColor 颜色 按钮在按下状态下的前景色
forwardDuration 持续时间 从normalColor到pressedColor的动画持续时间
backwardDuration 持续时间 从pressedColor返回到normalColor的动画持续时间
curve Curve 动画曲线。

主题

除了onTap和onLongPress之外，所有这些共享属性都可以通过CupertinoTextButtonTheme进行配置。只需将其包装在您的应用程序或树中CupertinoTextButton之上的任何其他父小部件中，如下所示

CupertinoTextButtonTheme(
    normalColor: Colors.white,
    pressedColor: Colors.orange,
    /* forwardDuration, backwardDuration and curve can also be configured here. */
    child: Row(
        children: [
            CupertinoTextButton(
                text: 'First Option',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                    // Do your first stuff here.
                },
            ),
            CupertinoTextButton(
                text: 'Second Option',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                    // Do your second stuff here.
                },
            ),
        ],
    ),
)

这样，这两个文本按钮将具有相同的颜色！

如果按钮中未指定这些属性，并且未提供主题，则将使用回退值

属性 回退值
normalColor Colors.black
pressedColor Theme*.primaryColor
forwardDuration const Duration(milliseconds: 20)
backwardDuration const Duration(milliseconds: 200)
curve Curves.fastOutSlowIn

* Theme — 默认的Flutter Theme。

GitHub

查看 Github