flutter:角标

角标应该非常常见了,以小说app为例,通常会在小说封面的右上角上显示当前未读的章数。

badges

简介

Flutter的badges库是一个用于创建徽章组件的开源库。它提供了简单易用的API,使开发者可以轻松地在Flutter应用程序中添加徽章效果。

官方文档
https://pub-web.flutter-io.cn/packages/badges

安装

dart 复制代码
flutter pub add badges

示例1

dart 复制代码
Center(
        child: badges.Badge(
      badgeContent: const Text('3',style: TextStyle(fontSize: 20),),
      child: SizedBox(
        width: 200,
        height: 260,
        child: Image.asset('lib/assets/img/error.jpg',fit: BoxFit.fill,),
      ),
    ));


示例2

dart 复制代码
Center(
        child: badges.Badge(
      position: badges.BadgePosition.topStart(), // 角标的位置
      badgeContent: const Text(
        '3',
        style: TextStyle(fontSize: 20,color: Colors.white),
      ), // 内容
      onTap: () {
        print("点击事件");
      },
      //    样式
      badgeStyle: badges.BadgeStyle(
          shape: badges.BadgeShape.square, // 形状
          badgeColor: Colors.blue,
          padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
          borderRadius: BorderRadius.circular(10)),
      child: SizedBox(
        width: 200,
        height: 260,
        child: Image.asset(
          'lib/assets/img/error.jpg',
          fit: BoxFit.fill,
        ),
      ),
    ));

示例3

dart 复制代码
 shape: badges.BadgeShape.twitter ,


示例4

dart 复制代码
shape: badges.BadgeShape.instagram , // 形状

rotated_corner_decoration

简介

Flutter中的rotated_corner_decoration是一个用于创建旋转圆角装饰的类。它是Flutter框架中的一个内置装饰器,可以应用于各种小部件,如容器、按钮、卡片等。

官方文档
https://pub-web.flutter-io.cn/packages/rotated_corner_decoration

安装

dart 复制代码
flutter pub add rotated_corner_decoration

示例1

dart 复制代码
Container(
          width: 200,
          height: 200,
          foregroundDecoration: const RotatedCornerDecoration.withColor(
              color: Colors.red,
              badgeSize: Size(30,30)
          ),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black,width: 1)
          ),
        )


示例2

dart 复制代码
Container(
      width: 200,
      height: 200,
      foregroundDecoration: const RotatedCornerDecoration.withColor(
          color: Colors.red,
          badgeSize: Size(60, 60), // 大小
          badgePosition: BadgePosition.topStart, //位置
          spanBaselineShift: 4, // 文字距离斜边的距离
          textSpan:
              TextSpan(text: 'flutter', style: TextStyle(color: Colors.white))),
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
    )


示例3

dart 复制代码
Container(
      width: 200,
      height: 200,
      foregroundDecoration: const RotatedCornerDecoration.withColor(
          color: Colors.red,
          badgeSize: Size(80, 80), // 大小
          badgePosition: BadgePosition.topStart, //位置
          spanBaselineShift: 4, // 文字距离斜边的距离
          textSpan:
              TextSpan(text: 'hello\nflutter', style: TextStyle(color: Colors.white))),
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
    )
相关推荐
瓜子三百克3 小时前
七、性能优化
flutter·性能优化
恋猫de小郭10 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡17 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克21 小时前
十、高级概念
flutter
帅次1 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡1 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉1 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1232 天前
FlutterView 源码解析
flutter
Zender Han2 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter