Flutter iOS风格容器插件cupertino_container的使用

Flutter iOS风格容器插件cupertino_container的使用

Cupertino Container 插件允许你在 Flutter 应用中添加一个具有 iOS 风格圆角的容器。

安装

  1. 在 pubspec.yaml 文件中添加最新版本的包，并运行 dart pub get：
dependencies:
  cupertino_container: ^1.0.0
  1. 导入包并在你的 Flutter 应用中使用它：
import 'package:cupertino_container/cupertino_container.dart';

示例

你可以修改多个属性来定制 CupertinoContainer 的外观。这些属性包括：

  • radius
  • child
  • decoration
  • margin
  • padding
  • onPressed
  • height
  • width

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cupertino Container', style: TextStyle(fontSize: 20)),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30),
          child: Column(
            children: [
              CupertinoContainer(
                decoration: const BoxDecoration(
                  color: Colors.black87,
                ),
                radius: BorderRadius.circular(30), /// iOS 圆角
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                margin: const EdgeInsets.only(top: 30),
                width: double.infinity,
                child: const Center(
                  child: Text(
                    '30 rounded', 
                    style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
                  )
                ),
              ),

              CupertinoContainer(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.red, Colors.blue]
                  )
                ),
                radius: BorderRadius.circular(50), /// iOS 圆角
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                margin: const EdgeInsets.only(top: 30),
                width: double.infinity,
                height: 250,
                child: const Center(
                  child: Text(
                    '50 rounded', 
                    style: TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold),
                  )
                ),
              ),


              const CupertinoContainer(
                decoration: BoxDecoration(
                  color: Colors.amber,
                ),
                radius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ), /// iOS 圆角
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                margin: EdgeInsets.only(top: 30),
                width: double.infinity,
                child: Center(
                  child: Text(
                    'Only top', 
                    style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
                  )
                ),
              ),
              const CupertinoContainer(
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                ),
                radius: BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                ), /// iOS 圆角
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                margin: EdgeInsets.only(top: 14),
                width: double.infinity,
                child: Center(
                  child: Text(
                    'Only Bottom', 
                    style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
                  )
                ),
              ),
            ],
          ),
        ),
      )
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何使用 cupertino_container（实际上在 Flutter 的标准库中，我们一般使用 Cupertino 前缀的组件来创建 iOS 风格的界面，而 CupertinoContainer 并不是一个标准的 Flutter 组件，但我们可以使用 CupertinoTheme 和 Container 来实现类似的效果）的示例代码。这里我们将使用 Container 来模拟一个 iOS 风格的容器，并通过 CupertinoTheme 来应用 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 Container Demo',
      theme: CupertinoThemeData(
        // 设置 iOS 风格的主题颜色
        primaryColor: CupertinoColors.activeBlue,
        scaffoldBackgroundColor: CupertinoColors.white,
      ),
      home: CupertinoPageScaffold(
        child: SafeArea(
          child: Center(
            child: CupertinoContainerDemo(),
          ),
        ),
      ),
    );
  }
}

class CupertinoContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 使用 Container 模拟 Cupertino 风格的容器
        Container(
          decoration: BoxDecoration(
            color: CupertinoColors.lightBackgroundGray,
            borderRadius: BorderRadius.circular(16), // iOS 风格的圆角
          ),
          padding: EdgeInsets.all(16),
          child: Text(
            '这是一个 iOS 风格的容器',
            style: TextStyle(
              color: CupertinoColors.black,
              fontSize: 20,
            ),
          ),
        ),
        SizedBox(height: 20),
        // 另一个带阴影的 Cupertino 风格容器示例
        Container(
          decoration: BoxDecoration(
            color: CupertinoColors.systemGrey,
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3), // iOS 风格的阴影
              ),
            ],
          ),
          padding: EdgeInsets.all(16),
          child: CupertinoButton(
            color: CupertinoColors.activeBlue,
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Text(
              '点击我',
              style: TextStyle(color: CupertinoColors.white),
            ),
            onPressed: () {
              // 按钮点击事件
              print('按钮被点击了');
            },
          ),
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个 CupertinoApp，并设置了 iOS 风格的主题颜色。然后，我们使用 Container 来模拟 iOS 风格的容器，通过 BoxDecoration 来设置容器的背景色和圆角，以及通过 CupertinoColors 来获取 iOS 风格的颜色。此外，我们还展示了如何为一个容器添加阴影效果，并创建了一个带有点击事件的 CupertinoButton。

请注意，虽然 cupertino_container 不是一个标准组件，但通过上述方法，你可以使用 Flutter 提供的 Cupertino 系列组件和 Container 来实现类似的效果。

回到顶部