Flutter iOS风格文本按钮插件cupertino_text_button的使用

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

文本按钮

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

CupertinoTextButton(
    text: 'Apply',
    style: const TextStyle(fontSize: 20),
    onTap: () {
        // 在这里处理你的文本操作。
    },
),

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

图标按钮

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

CupertinoTextButton.icon(
    icon: Icons.chevron_left,
    size: 30,
    onTap: () {
        // 在这里处理你的图标操作。
    },
),

对于图标按钮，你可以配置以下属性：

公共属性

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

主题

所有这些共享属性（除了onTap和onLongPress），都可以通过CupertinoTextButtonTheme进行配置。你可以将它包裹在你的应用或其他任何父组件上，例如：

CupertinoTextButtonTheme(
    color: Colors.white,
    pressedColor: Colors.orange,
    /* forwardDuration, backwardDuration 和 curve 也可以在这里配置。 */
    child: Row(
        children: [
            CupertinoTextButton(
                text: 'First Option',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                    // 在这里处理你的第一个操作。
                },
            ),
            CupertinoTextButton(
                text: 'Second Option',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                    // 在这里处理你的第二个操作。
                },
            ),
        ],
    ),
)

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

如果这些属性在按钮中未指定且未提供主题，则会使用默认值：

• Theme — 默认的Flutter主题。

完整示例

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

import 'package:cupertino_text_button/cupertino_text_button.dart';

void main() {
  runApp(const MyApp());
}

const title = 'Cupertino Text Button Example';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _noConfigurationCounter = 0;
  int _withoutThemeCounter = 0;
  int _withThemeCounter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 20.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Button without any configuration:',
                style: const TextStyle(fontSize: 17),
              ),
              CupertinoTextButton(
                text: 'You pressed this button $_noConfigurationCounter times',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                  setState(() {
                    _noConfigurationCounter++;
                  });
                },
              ),
              const SizedBox(height: 40),
              Text(
                'Button without theme:',
                style: const TextStyle(fontSize: 17),
              ),
              CupertinoTextButton(
                color: Colors.purple,
                pressedColor: Colors.orange,
                text: 'You pressed this button $_withoutThemeCounter times',
                style: const TextStyle(fontSize: 20),
                onTap: () {
                  setState(() {
                    _withoutThemeCounter++;
                  });
                },
              ),
              const SizedBox(height: 40),
              Text(
                'Button with theme:',
                style: const TextStyle(fontSize: 17),
              ),
              CupertinoTextButtonTheme(
                color: Colors.red,
                pressedColor: Colors.lime,
                forwardDuration: Duration(seconds: 1),
                child: CupertinoTextButton(
                  text: 'You pressed this button $_withThemeCounter times',
                  style: const TextStyle(fontSize: 20),
                  onTap: () {
                    setState(() {
                      _withThemeCounter++;
                    });
                  },
                ),
              ),
              const SizedBox(height: 40),
              Text(
                'Icon buttons:',
                style: const TextStyle(fontSize: 17),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CupertinoTextButton.icon(
                    icon: Icons.add,
                    size: 50,
                    onTap: () {
                      debugPrint('First Icon button tapped!');
                    },
                  ),
                  const SizedBox(width: 20),
                  CupertinoTextButton.icon(
                    icon: CupertinoIcons.add_circled,
                    size: 50,
                    onTap: () {
                      debugPrint('Second Icon button tapped!');
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}