Flutter复选框插件checkmark的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter复选框插件checkmark的使用

一个带有动画勾选标记的小部件。当你切换它时，它会自动进行动画效果。此外，它还可以根据需要进行样式调整。

外观

动画勾选标记

参数

class CheckMark extends ImplicitlyAnimatedWidget {
  const CheckMark({
    Key? key,
    Duration duration = const Duration(milliseconds: 300),
    Curve curve = Curves.linear,
    VoidCallback? onEnd,
    this.active = false,
    this.activeColor = const Color(0xff4fffad),
    this.inactiveColor = const Color(0xffe3e8ed),
    this.strokeWidth = 5,
    this.strokeJoin = StrokeJoin.round,
    this.strokeCap = StrokeCap.round,
  })
}
  • duration: 动画持续时间，默认为300毫秒。
  • curve: 动画曲线，默认为线性。
  • onEnd: 动画结束时触发的回调。
  • active: 控制是否激活勾选标记，默认为未激活。
  • activeColor: 激活状态下的颜色，默认为浅绿色。
  • inactiveColor: 未激活状态下的颜色，默认为浅灰色。
  • strokeWidth: 勾选标记线条宽度，默认为5。
  • strokeJoin: 勾选标记线条连接方式，默认为圆角。
  • strokeCap: 勾选标记线条端点样式，默认为圆头。

使用

在/example文件夹中可以找到上述功能的示例代码。

最小化示例

SizedBox(
  height: 50,
  width: 50,
  child: CheckMark(
    active: checked,
    curve: Curves.decelerate,
    duration: const Duration(milliseconds: 500),
  ),
),

完整示例

以下是一个完整的示例，展示了如何在应用中使用CheckMark插件：

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

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

  [@override](/user/override)
  _CheckMarkPageState createState() => _CheckMarkPageState();
}

class _CheckMarkPageState extends State<CheckMarkPage> {
  bool checked = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('示例'),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        alignment: Alignment.center,
        child: GestureDetector(
          onTap: () {
            setState(() {
              checked = !checked;
            });
          },
          child: SizedBox(
            height: 50,
            width: 50,
            child: CheckMark(
              active: checked,
              curve: Curves.decelerate,
              duration: const Duration(milliseconds: 500),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter复选框插件checkmark的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter复选框插件checkmark的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用Flutter中的checkmark插件来实现复选框功能的代码示例。checkmark插件提供了美观的复选框设计，可以方便地集成到Flutter应用中。

首先，确保在pubspec.yaml文件中添加checkmark依赖：

dependencies:
  flutter:
    sdk: flutter
  checkmark: ^0.3.2  # 请根据需要检查最新版本号

然后运行flutter pub get来安装依赖。

接下来，是一个完整的Flutter应用示例，展示了如何使用checkmark插件来实现复选框功能：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Checkmark Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CheckmarkDemo(),
    );
  }
}

class CheckmarkDemo extends StatefulWidget {
  @override
  _CheckmarkDemoState createState() => _CheckmarkDemoState();
}

class _CheckmarkDemoState extends State<CheckmarkDemo> {
  bool isChecked = false;

  void handleCheckboxChange(bool value) {
    setState(() {
      isChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkmark Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Checkmark(
              value: isChecked,
              onChanged: handleCheckboxChange,
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              activeStrokeWidth: 2.0,
              inactiveStrokeWidth: 2.0,
              size: 24.0,
            ),
            SizedBox(height: 20.0),
            Text(
              isChecked ? 'Checked' : 'Unchecked',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 依赖安装：首先在pubspec.yaml文件中添加checkmark依赖。
  2. 主应用：MyApp是一个无状态组件，定义了应用的主题和主页。
  3. 主页：CheckmarkDemo是一个有状态组件，用于管理复选框的状态。
  4. 状态管理：在_CheckmarkDemoState中，定义了一个isChecked布尔变量来跟踪复选框的状态，并定义了一个handleCheckboxChange方法来更新该状态。
  5. UI组件：在build方法中，使用Checkmark组件来显示复选框，并设置其初始值、更改回调、激活/非激活颜色和尺寸等属性。同时，还显示了一个文本，根据复选框的状态显示“Checked”或“Unchecked”。

这个示例展示了如何在Flutter中使用checkmark插件来创建和管理复选框。你可以根据需要进一步自定义和扩展这个示例。

回到顶部