Flutter ShapeBorder 使用总结

已于 2024-01-20 17:08:21 修改
阅读量1.1k 收藏 22
点赞数 18
文章标签： flutter 前端 javascript android 学习 面试
于 2023-12-18 07:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bugyinyin/article/details/135016043
版权

Flutter ShapeBorder 使用总结

简介

ShapeBorder 用于设置形状和轮廓，比如圆形，矩形，圆角矩形等。常用于 Container 中。

继承结构如下：

  • ShapeBorder【abstract】
    • BeveledRectangleBorder
    • BoxBorder【abstract】
      • Border
      • BorderDirectional
    • CircleBorder
    • ContinuousRectangleBorder
    • RoundedRectangleBorder
    • StadiumBorder
    • InputBorder【abstract】
      • OutlineInputBorder
      • UnderlineInputBorder

其中 ShapeBorder、BoxBorder、InputBorder 是抽象父类。InputBorder 通常用于输入框相关的。

类的关系图

ShapeBorder子类继承关系图

ShapeBorder子类继承关系图

BeveledRectangleBorder

斜面圆角矩形

继承关系:

BeveledRectangleBorder > ShapeBorder
Widget _beveledRectangleBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}

效果如下：

beveled_rectangle_border

beveled_rectangle_border

BoxBorder

BoxBorder主要掌管边线方面的事，自身是abstract，不能直接用

BoxBorder官方说明

Base class for box borders that can paint as rectangles, circles, or rounded rectangles.

Border

继承关系:

Border > BoxBorder > ShapeBorder

Border官方说明

A border of a box, comprised of four sides: top, right, bottom, left.

Widget _border() {
  return Center(
    child: Container(
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        color: Colors.orange,
        shape: Border(
          top: BorderSide(width: 6.0, color: Colors.black12),
          left: BorderSide(width: 6.0, color: Colors.black12),
          right: BorderSide(width: 6.0, color: Colors.black26),
          bottom: BorderSide(width: 6.0, color: Colors.black26),
        ),
      ),
      child: Text(
        "Border",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  );
}

效果图：

border

border

BorderDirectional

继承关系:

BorderDirectional > BoxBorder > ShapeBorder
BorderDirectional` 通过 `top`,`bottom`,`start`,`end`分别控制上下左右的边线
边线对象`BorderSide
Widget _borderDirectional() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: BorderDirectional(
          start: BorderSide(color: Colors.black, width: 15),
          end: BorderSide(color: Colors.black, width: 15),
          top: BorderSide(
            color: Colors.black,
          ),
          bottom: BorderSide(
            color: Colors.black,
          ),
        ),
      ),
    ),
  );
}

效果如下：

border_directional_01

border_directional_01

只设置左右的BorderSide

Widget _borderDirectional2() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: BorderDirectional(
          start: BorderSide(color: Colors.black, width: 15),
          end: BorderSide(color: Colors.black, width: 15),
        ),
      ),
    ),
  );
}

效果如下：

border_directional_02

border_directional_02

CircleBorder

圆形边框。

继承关系:

CircleBorder > ShapeBorder
Widget _circleBorder1() {
  return Center(
    child: Container(
      width: 120,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: CircleBorder(
          side: BorderSide(),
        ),
      ),
    ),
  );
}

效果如下：

circle_border_01

circle_border_01

上面的是使用默认参数的效果

circle_border_03

circle_border_03

通过设置BorderSide来设置边框颜色和宽度，以及是否显示边框

Widget _circleBorder2() {
  return Center(
    child: Container(
      width: 120,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: CircleBorder(
          side: BorderSide(
            width: 10,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}

效果如下：

circle_border_02

circle_border_02

ContinuousRectangleBorder

平滑过渡的矩形边框

继承关系:

ContinuousRectangleBorder > ShapeBorder
Widget _continuousRectangleBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.circular(40),
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}

效果如下：

continuous_rectangle_border

continuous_rectangle_border

RoundedRectangleBorder

圆角矩形。

继承关系:

RoundedRectangleBorder > ShapeBorder
Widget _roundedRectangleBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}

效果如下：

rounded_rectangle_border_01

rounded_rectangle_border_01

StadiumBorder

体育场形状。即两边是半圆。

继承关系:

StadiumBorder > ShapeBorder
Widget _stadiumBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/img_flutter.png'),
          fit: BoxFit.cover,
        ),
        shape: StadiumBorder(
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}

效果如下：

stadiu_border_01

stadiu_border_01

InputBorder

继承关系:

InputBorder > ShapeBorder

官方说明：

Defines the appearance of an [InputDecorator]’s border. An input decorator’s border is specified by [InputDecoration.border]. The border is drawn relative to the input decorator’s “container” which is the optionally filled area above the decorator’s helper, error,and counter.

常用的输入边框，有2个衍生子类OutlineInputBorder 和UnderlineInputBorder

OutlineInputBorder

继承关系:

OutlineInputBorder > InputBorder > ShapeBorder
Widget _outlineInputBorder() {
  return Center(
    child: Container(
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        color: Colors.orange,
        shape: OutlineInputBorder(
          borderSide: BorderSide(width: 2.0, color: Colors.purple),
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
      child: Text(
        "OutlineInputBorder",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  );
}

效果如下：

outlineInput_borde

outlineInput_borde

UnderlineInputBorder

继承关系:

UnderlineInputBorder > InputBorder > ShapeBorder
Widget _underlineInputBorder() {
  return Center(
    child: Container(
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        color: Colors.orange,
        shape: UnderlineInputBorder(
          borderSide: BorderSide(width: 2.0, color: Colors.purple),
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
      child: Text(
        "UnderlineInputBorder",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  );
}

效果如下：

underlineInput_border

underlineInput_border

最后

这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》，从编程语言到项目实战，一条龙服务！！

《Flutter Dart 语言编程入门到精通》

  • 第一章 Dart语言基础

  • 第二章 Dart 异步编程
    在这里插入图片描述

  • 第三章 异步之 Stream 详解

  • 第四章 Dart标准输入输出流
    在这里插入图片描述

  • 第五章 Dart 网络编程

  • 第六章 Flutter 爬虫与服务端
    在这里插入图片描述

  • 第七章 Dart 的服务端开发

  • 第八章 Dart 调用C语言混合编程

  • 第九章 LuaDardo中Dart与Lua的相互调用
    在这里插入图片描述

《Flutter实战：第二版》

  • 第一章：起步
  • 第二章：第一个Flutter应用
  • 第三章：基础组件
  • 第四章：布局类组件
  • 第五章：容器类组件

在这里插入图片描述

  • 第六章：可滚动组件

  • 第七章：功能型组件

  • 第八章：事件处理与通知

  • 第九章：动画

  • 第十章：自定义组件
    在这里插入图片描述

  • 第十一章：文件操作与网络请求

  • 第十二章：Flutter扩展

  • 第十三章：国际化

  • 第十四章：Flutter核心原理

  • 第十五章：一个完整的Flutter应用
    在这里插入图片描述

有需要学习资料的朋友扫描下方二维码即可免费领取！！！

bugyinyin
关注
【Flutter】Flutter 使用 dotted_border 实现添加虚线边框
Code Metaverse
09-04 1879
这个包可以让你轻松地为任何小部件添加虚线边框。
【Flutter】shape 属性 ShapeBorder，形状
自动人生博客
11-24 1872
控件的形状，我们可以通过该shape来定制widget 的形状，来达到自己想还要的形状效果。
flutter文本输入框使用
最新发布
且听真言
09-03 604
TextField 是 Material Design 文本字段。它允许用户使用硬件键盘或屏幕键盘输入文本。每当用户更改字段中的文本时，文本字段都会调用 onChanged 回调。如果用户表示他们已完成在字段中的输入（例如，通过按下软键盘上的按钮），文本字段将调用 onSubmitted 回调。
【Flutter高级玩法-shape】自定义按钮样式ShapeBorder
{丸の子}
08-19 2068
自定义按钮图片，可画无规则形状
flutter 边框_flutter设置圆角边框
weixin_39846364的博客
11-30 687
更多文章请查看 flutter从入门 到精通在这里使用 Container 容器来实现圆角矩形边框效果1 圆角矩形边框Container2 圆角矩形边框 Container( margin: EdgeInsets.only(left: 40, top: 40), //设置 child 居中 alignment: Alignm...
flutter-border
yujunlong3919的专栏
08-05 6166
文章目录Border继承构造方法BorderStyle和BorderSideBorderStyleBorderSide构造方法BoxShadow构造方法 Border 继承 Object-> ShapeBorder-> BoxBorder-> Border 构造方法 很简单的构造方法，用四个BorderSide组成， const Bord...
flutter中使用基于flutter-sound的flutter-sound-record录音
01-20
总结来说，`flutter-sound`和`flutter-sound-record`为Flutter开发者提供了一套完整的录音解决方案。通过这两个库，你可以轻松地在Flutter应用中实现高质量的录音功能，同时享受到跨平台的便利性。在实际开发过程中...
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
flutter-iconfont-cli 用纯JS把iconfont.cn的图标转换成Flutter Widget，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件 Step 1 在项目...
flutter_bluetooth:在Flutter中使用蓝牙插件（flutter_bluetooth_serial）
05-22
注意：这是应用程序的更新版本（使用flutter_bluetooth_serial 0.2.2）。 此版本的bug少得多，并提供了许多功能。 重要提示[2021年1月1日]： 提供了此应用程序的经过优化和生产的发行版本，称为Connect （同时支持...
flutter_custom_tabs:Flutter插件以使用Chrome自定义标签
04-30
Flutter插件，可使用。 只有Android版Chrome支持“自定义标签”。 因此，界面相同，但是行为如下： 安卓如果安装了Chrome，请在自定义标签中打开已自定义外观的Web URL。 如果尚未安装，请在其他浏览器中打开。 ...
flutter使用webrtc技术实现共享桌面，视频
02-22
在本文中，我们将深入探讨如何使用Flutter和WebRTC技术实现在移动应用中进行桌面共享和视频通信。首先，让我们简要了解一下Flutter、Dart和WebRTC这三个关键概念。 Flutter是Google开发的一个开源UI工具包，用于...
Flutter-Dotted-Border:Flutter软件包，可轻松在小部件周围添加虚线边框
04-29
虚线边框 一个flutter包，可以轻松在小部件周围添加虚线边框。 正在安装 要使用此包，请在您的pubspec.yaml文件中将dotted_border添加为依赖pubspec.yaml 。 用法 将DottedBorder小部件包裹在子小部件周围 DottedBorder ( color : Colors .black, strokeWidth : 1 , child : FlutterLogo (size : 148 ), ) BorderTypes 此程序包目前支持以下边框类型 矩形边框 RRectBorder CircleBorder 椭圆形边框 例子 return DottedBorder ( borderType : BorderType . RRect , radius : Radius . circular ( 12 ), p
Flutter(四)之Flutter的布局Widget
goodswifter
04-26 796
一. 单子布局组件 二. 多子布局组件
Flutter设置圆角边框,Flutter圆角背景
chuyouyinghe的专栏
07-14 1437
在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 Container( margin: EdgeInsets.only(left: 40, top: 40), //设置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, //边框设置 decora
Flutter 设置input边框
weixin_30247781的博客
08-20 2074
example 1 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Materia...
Flutter-Dotted-Border 项目教程
gitblog_00982的博客
08-16 582
Flutter-Dotted-Border 项目教程 Flutter-Dotted-BorderA Flutter package to easily add dashed borders around widgets项目地址:https://gitcode.com/gh_mirrors/fl/Flutter-Dotted-Border 1、项目介绍 Flutter-Dotted-Border ...
flutter编写border的相关代码和clip剪切
枣泥馅的博客
08-17 781
Container( width:deviceWidth, height: deviceHeight*0.318, decoration: BoxDecoration( color: Colors.amberAccent, border: Border.fromB
Flutter TextField InputDecoration OutlineInputBorder 黑边（ + 改边框颜色 + 设背景色等）
u014799995的博客
09-09 5528
整一个 TextField 的边框效果，拿 border: 尝试了半天，普通状态下总有个黑边，自定义的颜色也没看到，再看了眼 TextField 的一堆属性，突然发现 TextField 不仅有 border ，还有 errorBorder、focusedBorderfocusedBorder、focusedErrorBorder、disabledBorder、enabledBorder 这几个 border …… 好了，问题解开 ???? 示例： TextField(
Flutter使用WillPopScope防止误退出详解
在Flutter中，WillPopScope的使用通常涉及到onWillPop回调函数。当用户尝试离开当前页面时，如点击设备的Back按钮，这个回调会被调用。开发者可以在回调中返回一个Future，该Future的完成值将决定是否允许用户离开...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值