首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter中使用ShapeBorder类自定义黑色实心圆角边框

在Flutter中,可以使用ShapeBorder类来自定义黑色实心圆角边框。ShapeBorder是一个抽象类,用于定义各种形状的边框。

要在Flutter中使用ShapeBorder类自定义黑色实心圆角边框,可以按照以下步骤进行:

  1. 导入Flutter的material库:在Flutter项目的pubspec.yaml文件中,添加material库的依赖。
代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  flutter_material:
    sdk: flutter
  1. 创建一个自定义的ShapeBorder类:继承ShapeBorder类,并实现其中的抽象方法。
代码语言:txt
复制
import 'package:flutter/material.dart';

class CustomShapeBorder extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(0);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return Path()..addRect(rect);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(10)));
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.fill;

    canvas.drawRRect(RRect.fromRectAndRadius(rect, Radius.circular(10)), paint);
  }

  @override
  ShapeBorder scale(double t) {
    return CustomShapeBorder();
  }
}

在上面的代码中,我们创建了一个名为CustomShapeBorder的自定义ShapeBorder类。在getOuterPath方法中,我们使用RRect.fromRectAndRadius方法创建了一个具有10像素圆角的矩形路径。在paint方法中,我们使用黑色填充颜色绘制了这个路径。

  1. 在Flutter Widget中使用自定义的ShapeBorder类:可以将自定义的ShapeBorder类应用于任何支持ShapeDecoration的Widget上。
代码语言:txt
复制
import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      decoration: ShapeDecoration(
        shape: CustomShapeBorder(),
      ),
    );
  }
}

在上面的代码中,我们创建了一个名为MyWidget的无状态Widget,并在Container的decoration属性中应用了CustomShapeBorder类。

这样,就可以在Flutter中使用ShapeBorder类自定义黑色实心圆角边框了。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 腾讯云云服务器CVM:https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库MySQL:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储COS:https://cloud.tencent.com/product/cos
  • 腾讯云人工智能AI:https://cloud.tencent.com/product/ai
  • 腾讯云物联网IoT Hub:https://cloud.tencent.com/product/iothub
  • 腾讯云移动开发移动推送:https://cloud.tencent.com/product/umeng_push
  • 腾讯云区块链BCOS:https://cloud.tencent.com/product/bcos
  • 腾讯云元宇宙QCloud XR:https://cloud.tencent.com/product/qcloudxr
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Flutter 实战】各种各样形状的组件

    老孟导读:Flutter很多组件都有一个叫做shape的属性,类型是ShapeBorder,比如Button、Card等组件,shape表示控件的形状,系统已经为我们提供了很多形状,对于没有此属性的组件...,可以使用 Clip 组件进行裁减。...,直线和圆角平滑连续的过渡,和RoundedRectangleBorder相比,圆角效果会小一些。...( 'images/1.png', fit: BoxFit.cover, ), ), ) 效果如下: ClipPath ClipPath组件根据路径进行裁剪,我们自定义裁剪路径也可以使用系统提供的...CustomClipper CustomClipper并不是一个组件,而是一个abstract(抽象)使用CustomClipper可以绘制出任何我们想要的形状,比如三角形,代码如下: @override

    1.2K10

    Flutter 组件集录】ClipPath| 8月更文挑战

    Flutter 框架 只有 ShapeBorderClipper 可用。 ShapeBorderClipper 需要传入一个 ShapeBorder 对象。...ShapeBorder 也是个抽象Flutter 内置了很多的 ShapeBorder 子类。...使用 ClipPath 的注意点 源码说,通过路径裁剪是比较昂贵的,对于一些常规的裁剪,可以考虑其他组件,比如矩形裁剪可以使用 ClipRect,圆或椭圆可以使用 ClipOval ,圆角矩形可以使用...高级玩法-shape】Path在手,天下我有 一文中介绍过基于 path 自定义 ShapeBorder使用,其实这里也是类似的。...而非自定义 ShapeBorder,再通过 ShapeBorderClipper 在 ClipPath 中使用,因为自定义 ShapeBorder 比较复杂,还能进行绘制,但是绘制的东西在 ClipPath

    71830

    Flutter高级玩法-shape】Path在手,天下我有

    fontSize: 20), ), ), ); } 复制代码 ---- 4 RoundedRectangleBorder和ContinuousRectangleBorder 圆角矩形...---- 二、自定义ShapeBorder 1.继承ShapeBorder 一共有五个抽象方法 class SimpleShapeBoder extends ShapeBorder{ @override...: 用path.addRRect来添加一个圆角矩形,然后就出现效果了 ?...下面根据位置计算出一个圆形路径 将圆角矩形和圆形两个路径叠加,最后使用奇偶环绕来处理路径 关于路径Path的环绕规则已经其他的东西,可以看以前写的Android的路径文章 Android关于Path...ClipPath中使用shape 上面主要在Material中使用,ClipPath也有ShapeBorder的用武之地 现在我想用优惠券的裁切路径来裁个图片,so easy ?

    3.8K61

    Flutter 接入 Apple 账号登录教程

    引言 2019 年底,苹果发布了 iOS 13,并增加了一个新要求:任何使用第三方登录方法的应用( Facebook、Google、Twitter 等)在提交到 App Store 时必须也支持 Sign...本文将详细介绍如何在 Flutter 实现这一功能,包括项目配置、iOS 部分的实现,以及 Flutter 代码的编写。...如果你的 iOS 应用使用了第三方认证方法,必须实现 Sign in with Apple。在 Android 版本可以选择不实现,因为这仅适用于 App Store。...有三种允许的按钮样式可供选择: 黑色标志,白色背景 白色标志,黑色背景 黑色标志,白色背景,带黑色边框 按钮的高度和圆角可以根据你的需求进行调整。...实现 在 Flutter 添加 Sign in with Apple 按钮有两种方法: 重新绘制按钮 使用 iOS 视图(推荐) 使用 iOS 视图的步骤: 在你的 Dart 代码,找到要放置 Sign

    10010

    使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?... Firefox 和 Safari 使用私有属性实现圆角效果; background-color: #ccc;这个表示边框内的底部图片颜色; border: 1px solid #000;...表示边框的宽度,实心的,颜色是黑色的; border-top-left-radius: 55px 25px;表示左上角的边框圆角效果,通过英文就可以识别:top,left,修饰圆角的长度通过控制像素值来实现...,55px表示横向的长度,25px表示纵向的长度; 同理,border-bottom-right-radius: 55px 25px;右下角的圆角效果只要修改top为bottom就可以了; 使用css3...来实现边框圆角效果 其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius 是 webkit 内核浏览器( Safari

    94910

    Flutter 组件集录 | RawMagnifier 组件 - 拿起你的八倍镜

    前言 今天看 Flutter 源码,偶然发现 Magnifier 组件,这单词不就是 放大镜 嘛! 再结合新版 Flutter 输入文本的放大镜效果,直觉告诉我这玩意应该可以放大任何组件。...如下所示,背景是一张图片,使用 RawMagnifier 实现了点击拖拽局部放大的效果,看起来还是蛮酷的: 另外,也可以自定义放大镜的形状,如下的五角星: 该组件已收录入 FlutterUnit...RawMagnifier 组件的简单使用 下面来简单使用一下:案例通过 Stack 将 Image 和 RawMagnifier 叠放在一起,并且居中对齐。...在 《【Flutter高级玩法-shape】Path在手,天下我有》 一文详细介绍了该类型的使用。...比如下面自定义一个五角星的形状: class _StarShapeBorder extends ShapeBorder { final Path _path = Path(); @override

    41920

    绘图[上](四)

    image.png 目录 绘图工具 Android下绘图需要使用view.使用自定义的view完成绘制. 其中需要使用的有三个工具:Paint,Canvas,Path....设置画笔的颜色 setARGB(); 设置画笔的A、R、G、B值 setAlpha(); 设置画笔的Alpha值 setTextSize(); 设置字体的尺寸 setStyle(); 设置画笔的风格(空心或实心...) setStrokeWidth(); 设置空心边框的宽度 getColor(); 获取画笔的颜色 Canvas Canvass是画布....使用Path不仅可以绘制简单的图形(圆形,矩形,直线等),也可以绘制复杂一些的图形(正多边形,五角星等),还有绘制裁剪和绘制文本都会用到Path。...使用Canvas和Paint画圆 首先创建一个新的,集成于view: HelloView.java文件: package com.example.user.test11; import android.content.Context

    76030

    Flutter第7天--字体图标+综合小案例+Android代码交互

    Icon(Icons.android)也许你经常用,但内置图标有限,只能测试玩玩 实际上用还是需要自定义才行,前端的时候有字体图标,Flutter应该也行 //比如我们经常怎样用: Icon(Icons.comment...Image 3.png ---- 4.根据Flutter内置的,我写了一个自动代码生成器 虽然直接也能用,不够要记住图标的unicode码,算了,还是跟Flutter看齐吧 注意:为了简单使用:...两个对应.png ---- 2.Flutter传参,调用Android含参方法:三对应 ?...final double y; 一个shape牵扯出这么多,有人可能就栈溢出了,还是使用默认的吧,等一下,且听我分析 当Radius入问题栈之后,看一下也就是两个值,就出栈了,BorderRadius...RoundedRectangleBorder改变圆角大小+边线 ?

    2.4K30

    【愚公系列】2023年11月 WPF控件专题 Rectangle控件详解

    WPF控件可以分为两:原生控件和自定义控件。原生控件是由Microsoft提供的内置控件,Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。...自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项,以及更好的用户体验。...它可以在UI中用于多种用途,绘制边框和填充区域等。...除了上述属性,Rectangle控件还有其他一些常用属性,:RadiusX和RadiusY:用于设置圆角的横向和纵向半径;Stretch:用于指定如何拉伸或缩放矩形以适应其父元素;Opacity:用于设置透明度...="2" RadiusX="10" RadiusY="10" Opacity="0.5"/>这将创建一个100x100的蓝色矩形,带有10像素半径的圆角黑色描边和2像素线条宽度,以及50%的不透明度。

    57231

    Flutter 的 Shimmer 动画效果

    在在这篇博客,我们将探索 Flutter 的 Shimmer 动画效果。我们将看到如何实现微光动画效果的演示程序,并在您的 Flutter 应用程序中使用shimmer包展示加载动画效果。...它可以很好地被利用,而不是传统的 ProgressBar 或 Flutter 结构可访问的常见loading。 通常,在我们打开应用程序的任何时候,我们都会看到具有动画的loading。...此演示视频展示了如何在颤动创建微光动画效果。它展示了如何在 Flutter应用程序中使用shimmer包来实现微光动画效果。...MovieModel({required this.urlImg, required this.title, required this.detail}); } 我们将创建一个*...**在这个,我们将创建三个最终字符串,分别是 urlImg、title 和 detail。我们还创建了所有字符串项的构造函数。

    6K20

    Flutter 组件集录 | 全面认识 AppBar 组件 - 使用

    如下是 _PreferredAppBarSize 的定义,它继承自 Size,是一个专为 AppBar 高度派生的。...关于ShapeBorder 相关的使用,可以参考另一篇文章: 【Path在手,天下我有】。...---- 在 AppBar 的使用过程,有一个非常重要,可能很少人注意的一点: AppBar 的背景色可以影响顶部状态栏的颜色。...比如默认情况下背景色是蓝色,状态栏是白色: 如果背景色是白色,状态栏就会是黑色,这样就很方便。 如果不使用 AppBar,也能界面跳着跳着状态栏就错乱了。比如类似下面的情况。...那本文就到这里,谢谢观看 ~ ---- 更多 Flutter 内置组件介绍,欢迎关注 《Flutter 组件集录》 专栏。

    1.5K11

    腾讯开源超实用的UI轮子库,我是轮子搬运工

    丰富的 UI 控件 提供丰富常用的 UI 控件,例如 BottomSheet、Tab、圆角 ImageView、下拉刷新等,使用方便灵活,并且支持自定义控件的样式。...QMUIRadiusImageView 提供为图片添加圆角边框、剪裁到圆形或其他形状等功能。 QMUIRoundButton 对 Button 提供圆角功能,支持以下特性: 指定圆角的大小。...分别指定不同方向的圆角大小。 指定圆角的大小为高度的一半,并跟随高度变化自适应圆角大小。 支持分别指定背景色和边框色,指定颜色时支持使用 color 或 ColorStateList。...QMUIDrawableHelper 快速绘制一张指定大小、颜色、边框的图片,支持形状为圆角矩形和圆形。 快速绘制一张带上分隔线或下分隔线的图片。 快速绘制一张可带圆角的渐变图片。...提供多个常用的工具方法,获取状态栏高度、判断当前是否全屏等等。

    4.8K30

    你知道吗,Flutter内置了10多种Button控件

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 Flutter内置了10多种Button(按钮)控件供我们使用...设置字体样式,用法如下: RaisedButton( textTheme: ButtonTextTheme.primary, ... ) ButtonTextTheme的值介绍如下: normal:黑色或者白色字体...RawMaterialButton RawMaterialButton是基于Semantics, Material和InkWell创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式...ButtonBar ButtonBar并不是一个单独的按钮控件,而是末端对齐的容器控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行。...当然我们也可以设置边框圆角半径、宽度、颜色等: ToggleButtons( borderRadius: BorderRadius.circular(30), borderColor

    2.5K30

    Android实用View:仿微信支付密码输入框

    : 绘制密码之间的分割线: 绘制实心圆代替输入的字符: 总结 番外篇 1 前言 开始阅读本篇文章之前先来说一下使用场景吧,我们知道如今移动支付已经占据我们日常支付的90%的份额,以微信支付和支付宝支付为主...,也越来越多的APP开始添加支付模块,不管使用哪种支付有一个步骤是少不了的,那就是输入支付密码(指纹支付再此就不做讨论了哦),所以今天来给大家带来一篇自定义支付密码输入框的设计和实现方式,同时记录自己工作遇到的问题及解决办法...看到以上三种实现方式想必你大概已经知道我们要使用哪种方式实现了,没错就是集成EditView的自定义view,这样我们还可以使用很多EditView的属性哦 4 实现步骤 绘制外边框(可以是直角也可以是圆角...绘制外边框: 要想绘制边框我们首先要知道view的宽高,通过onSizeChanged方法去初始化宽高等数据,然后绘制圆角矩形(默认让他矩形显示直接传入圆角半径为0即可) ? ? 2....实际使用我们这样设置(是不是瞬间感觉用的过程简单了很多) ? 文章到此本应该结束了,可是我们UI设计师给出的效果图不是这样子的,不按常理出牌(心中顿时飘过一万只草泥马) ?

    1.7K20
    领券