Flutter iOS风格UI组件插件cupertino_rect的使用

Flutter iOS风格UI组件插件cupertino_rect的使用

cupertino_rrect 插件提供了类似于macOS和iOS的圆角矩形路径算法。这种圆角矩形称为squircle，过渡更平滑。

下图展示了一个蓝色的cupertino圆角矩形覆盖在具有相同圆角半径（100）的红色普通圆角矩形上：

Cupertino圆角矩形与普通圆角矩形对比

路径算法基于这篇文章。

使用方法

创建cupertino圆角矩形路径

import 'package:cupertino_rrect/cupertino_rrect.dart';

final path = Path();
path.addCupertinoRRect(rrect);

使用 CupertinoRectangleBorder

import 'package:cupertino_rrect/cupertino_rrect.dart';

Container(
  decoration: ShapeDecoration(
    shape: CupertinoRectangleBorder(
      borderRadius: BorderRadius.circular(radius),
    ),
  ),
),

示例代码

以下是完整的示例代码，展示了如何使用 cupertino_rrect 插件创建一个可以动态调整圆角半径的cupertino圆角矩形，并与普通圆角矩形进行比较。

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

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

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  double radius = 50;
  bool showStandard = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Radius: ${radius.roundToDouble()}'),
                  Slider(
                    value: radius,
                    min: 0,
                    max: 100,
                    onChanged: (value) {
                      setState(() {
                        radius = value;
                      });
                    },
                  ),
                  Row(
                    children: [
                      Checkbox(
                        value: showStandard,
                        onChanged: (v) {
                          setState(() {
                            showStandard = v!;
                          });
                        },
                      ),
                      const Text('显示普通RRect'),
                    ],
                  ),
                ],
              ),
              Stack(
                fit: StackFit.passthrough,
                children: [
                  if (showStandard)
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(radius),
                        color: Colors.red,
                      ),
                      width: 300,
                      height: 300,
                    ),
                  Container(
                    decoration: ShapeDecoration(
                      shape: CupertinoRectangleBorder(
                        borderRadius: BorderRadius.circular(radius),
                      ),
                      color: Colors.blue,
                    ),
                    width: 300,
                    height: 300,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter iOS风格UI组件插件cupertino_rect的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter iOS风格UI组件插件cupertino_rect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，cupertino_rect 并不是 Flutter 官方库中的一个标准组件。不过，从你提到的“iOS风格UI组件插件”来看，你可能是在寻找与 Cupertino 风格相关的组件。Flutter 提供了一套完整的 Cupertino 风格的组件库，用于构建具有 iOS 风格的界面。

在 Flutter 中，Cupertino 前缀的组件通常代表 iOS 风格的 UI 元素。例如，CupertinoButton、CupertinoSlider、CupertinoNavigationBar 等。

如果你想创建一个类似于 iOS 样式的矩形按钮或容器，你可以使用 CupertinoButton 或者 CupertinoTheme 与 Container 结合来实现。以下是一个简单的例子，展示了如何使用 CupertinoButton 创建一个 iOS 风格的按钮：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Cupertino Rect Example',
      home: Scaffold(
        appBar: CupertinoNavigationBar(
          middle: Text('Cupertino Rect Example'),
        ),
        body: Center(
          child: CupertinoButton(
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Text(
              'iOS Style Button',
              style: TextStyle(color: CupertinoColors.white),
            ),
            onPressed: () {
              // 按钮点击事件
              print('Button tapped!');
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了 CupertinoApp 作为应用的主题，它提供了 iOS 风格的配色方案和导航栏。然后，我们在 Scaffold 的 body 中添加了一个居中的 CupertinoButton。

如果你想创建一个自定义的矩形容器，并且想要它看起来像是 iOS 风格的，你可以使用 Container 结合 CupertinoTheme 来实现自定义样式。以下是一个例子：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Custom Cupertino Rect',
      home: Scaffold(
        appBar: CupertinoNavigationBar(
          middle: Text('Custom Cupertino Rect'),
        ),
        body: Center(
          child: CupertinoTheme(
            data: CupertinoThemeData(
              brightness: Brightness.light,
              primaryColor: CupertinoColors.activeBlue,
            ),
            child: Container(
              decoration: BoxDecoration(
                color: CupertinoColors.lightBackgroundGray,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: CupertinoColors.inactiveGray, width: 1),
              ),
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Text(
                'Custom iOS Style Rect',
                style: TextStyle(color: CupertinoColors.black),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用 CupertinoTheme 来应用 iOS 风格的配色方案，并在 Container 中设置了背景颜色、边框和圆角，以创建一个自定义的矩形容器。

希望这些例子能够帮助你理解如何在 Flutter 中使用 Cupertino 风格的组件来创建 iOS 风格的 UI。如果你有更具体的需求或问题，请随时提问！

回到顶部