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

flutter代码绘制屏幕下方的矩形底线-为什么(附加示例)

Flutter是一款跨平台的移动应用开发框架,具备快速开发、高效、美观的特点。为了在屏幕下方绘制矩形底线,可以使用Flutter的绘图功能以及布局和样式控件来实现。

以下是一个示例的Flutter代码,用于绘制屏幕下方的矩形底线:

代码语言:txt
复制
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('矩形底线示例'),
        ),
        body: Container(
          color: Colors.white,
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Text(
                '这是一个示例文本',
                style: TextStyle(fontSize: 18),
              ),
              SizedBox(height: 10),
              Container(
                height: 1,
                width: double.infinity,
                color: Colors.black,
              ),
              SizedBox(height: 10),
              Text(
                '这是另一个示例文本',
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,首先在应用程序的顶层创建了一个MyApp类,继承自StatelessWidgetMyApp类作为应用程序的主控件,通过runApp()函数将其启动。

MyAppbuild()方法中,创建了一个MaterialApp作为根组件,其中包含了一个Scaffold作为应用程序的主要布局组件。Scaffold内部包含了一个AppBar作为顶部导航栏,以及一个body容器作为页面主体内容。

body容器内部,使用Container组件来设置背景颜色并添加内边距。然后,通过Column组件将需要显示的文本组件以及矩形底线组件垂直排列。

矩形底线使用一个高度为1的Container组件来实现,通过设置width属性为double.infinity来使其宽度充满整个屏幕,并设置color属性为Colors.black来指定底线的颜色。

最后,示例中通过SizedBox组件来设置文本组件之间的间距。

这个示例可以在屏幕下方绘制出一个黑色的矩形底线,用于视觉上的分隔或装饰效果。

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

  • Flutter:一款跨平台的移动应用开发框架,可在腾讯云上使用。产品介绍链接
  • 腾讯云服务器(CVM):提供弹性计算能力,支持部署和运行Flutter应用程序。产品介绍链接
  • 腾讯云数据库(TencentDB):提供可靠的云数据库服务,用于存储Flutter应用程序的数据。产品介绍链接
  • 腾讯云CDN(Content Delivery Network):提供全球加速分发服务,可加速Flutter应用程序的内容传输。产品介绍链接
  • 腾讯云函数计算(Serverless):提供按需运行代码的无服务器计算服务,可用于处理Flutter应用程序的后端逻辑。产品介绍链接

请注意,以上推荐的腾讯云产品仅供参考,实际选择需根据具体需求进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

​打开Flutter动画另一种姿势——Flare

Flare地址 为什么要使用Flare 通过代码创建动画是一件很 romantic 事情,同时也是很费神费心事情。稍稍遇到一些不够规则、非线性动画需求,你头发又会止不住往下掉。...默认为 public 绘制动画 之后则可以开始动画制作了,以一个简单按钮为例: 选择矩形工具: [1240] 画完一个矩形后,点击左侧资源区 Artboard 画板,在右侧调整其Size大小: [1240...] 接着调整所绘制矩形属性: [1240] 接下来,点击左侧资源区 ANIMATE 进入动画设计模式,该模式下,无法增加或删除资源文件,点击矩形,在右侧记录 矩形大小与矩形圆角 在初始帧属性: [...1240] 然后调整中下方区域,首先打开动画时长区间,然后将指针拨到00:01:00(mac可以使用快捷键command+shift+左右,windows可以使用快捷键ctrl+shift+左右,一次调整...代码交互 示例代码如下: [1240] 说明: FlareActor:用于展示flr文件Widget animation参数: 播放动画名字,也是标识 callback(animationName)

2K30

Flutter第2天--Animation动画+粒子运动

Flutter学习第二天----2018-12-17----天气晴朗 零前言: 昨天讲了一下Flutter基础项目,介绍了一下Dart语言,简单用Canvas绘个图 本来打算今天把内置控件看一下...五角星长大.gif ---- 1.照葫芦画瓢 按照昨天Flutter初始项目,我们来自己写一个 本人是喜欢分包,Javaer优良习惯。...(动画UI不在当前屏幕时)消耗不必要资源 controller = AnimationController( duration: const Duration(milliseconds...(动画UI不在当前屏幕时)消耗不必要资源 controller = AnimationController( duration: const Duration(milliseconds...---- 五、粒子时钟 这里就不详细分析,这里Java版已经分析很细致了,直接上代码(基本上是Java翻译版) 这个效果新建了一个页面来做,digit三维数组Dart版附在文尾 1.

2.4K20

大前端开发中“树” (下)

4.5.3 渲染进程与渲染树 动画和屏幕上组合图层被一个单独进程管理,而不是应用程序,这个进程就是所谓渲染服务。...使用这个树状结构,渲染服务对动画每一帧做出如下工作: 对所有的图层属性计算中间值,设置 OpenGL 几何形状(纹理化三角形)来执行渲染 在屏幕上渲染可见三角形 五、FlutterFlutter...5.2.3 小结 Flutter 中各个组件构成一整棵树整体,通过组件间协同来完成视图绘制。...Virtual DOM 通过屏蔽上层代码对 DOM 直接维护,可以实现更可控局部更新,从而提升性能和易用性。...更进一步,上层业务代码可以在 Widget 声明 “有状态” 和 “无状态” 来显式控制更新。

1.9K30

Flutter学习之视图体系

image.png 一、前言 经过之前学习,可以知道Flutter是一种全新响应式跨平台移动开发框架,越来越多开发者参与学习或者研究中,确实在iOS和Android平台上能够用一套代码构建出性能比较高应用程序...mount方法负责将任何子Widget扩充到Widget并根据需要调用attachRenderObject,以将任何关联渲染对象附加到渲染树上。 此时,element被视为激活,可能出现在屏幕上。...activate方法,并重新附加到element渲染对象到渲染树上。...,这个方法将Canvas画好Scene对象传给window.render()方法,该方法会直接将Scene信息发送给Flutter engine,最终Flutter engine将图像画在设备屏幕上,...element提供配置信息,每一个widget在Flutter里是一份配置数据,而代表屏幕背后元素是element,而真正布局、渲染是通过RenderObject来完成,从创建到渲染主要流程是:

1.4K30

Flutter性能揭秘之RepaintBoundary

Flutter会在屏幕绘制Widget。如果一个Widget内容需要更新,那就只能重绘了。尽管如此,Flutter同样会重新绘制一些Widget,而这些Widget内容仍有部分未被改变。...为什么需要使用RepaintBoundary呢。 Flutter Widget与RenderObjects有关。一个RenderObject有一个叫做paint函数,它被用来执行绘画过程。...我们将做一个简单演示程序,背景是利用CustomPainter绘制,有10000个椭圆。同时还有一个光标,在客户接触到屏幕最后一个位置后移动。下面是没有RepaintBoundary代码。...= _offset; } 当我们运行应用程序时,我们应该得到下面屏幕输出,如屏幕视频。如果你试图在屏幕上移动指针,应用程序将非常滞后,因为它重新绘制背景,需要昂贵计算。...有了这个简单改变,现在当Flutter重绘光标时,背景就不需要重绘了。应用程序应该不再是滞后了。 整个代码如下所示。

56420

Flutter 专题】33 自定义 View 之 Canvas (一)

和尚最近在学习自定义 View,刚了解了一下 Paint 画笔神奇之处,现在学习一下 Canvas 画布神秘之处。Flutter 提供了众多绘制方法,和尚接触不深,尽量都尝试一下。...drawRect 绘制矩形 drawRect 用来绘制矩形Flutter 提供了多种绘制矩形方法: Rect.fromPoints 根据两个点(左上角点/右下角点)来绘制; Rect.fromLTRB...根据以屏幕左上角为坐标系圆点,分别设置上下左右四个方向距离; Rect.fromLTWH 根据设置左上角点与矩形宽高来绘制; Rect.fromCircle 最特殊,根据圆形绘制正方形; canvas.drawRect...drawRRect 绘制圆角矩形 drawRRect 绘制圆角矩形Flutter 提供了多种绘制方法: RRect.fromLTRBXY 前四个参数用来绘制矩形位置,剩余两个参数绘制固定 x/y 弧度...drawPath 绘制路径 drawPath 用来绘制路径,Flutter 提供了众多路径方法,和尚尝试几种常用方法: moveTo() 即从当前坐标点开始,不设置时默认为屏幕左上角位置; lineTo

1.1K41

【ZRender 渲染引擎 - 壹】 | 基础图形元素绘制

所以准备研究一下 ZRender ,体会一下其中设计思想、结构思路和逻辑实现,先打造一个符合 Flutter 框架二维绘图引擎库 render2d。这点对于绘制小能手我感觉还是有些希望。...ZRender 和基础图形元素介绍 Flutter 中对于绘制封装了 Canvas、 Paint、Path 、Matrix4 等类型,并且有自身 Animation 动画机制。...ZRender 封装感觉要比 Flutter 绘制系统要高一层级,它封装了很多基础设施,让绘制对于使用者而言更加简易。所以有必要学习一下,它山之石可以攻玉。...如下是折线 Polyline 绘制效果,可以看出 ZRender 默认坐标系是以 dom 节点 左上角为原点,向左和下方为正方向直角坐标系,这也是屏幕渲染中最常用坐标系: Polyline...由于基本流程是相同,下面的绘制体验中,只贴出核心图元对象创建代码: 直线通过 shape 属性 x1、y1、x2、y2 指定两个坐标,进行连线: const line = new zrender.Line

2.3K11

我对Flutter第一次失望

但是,在花了最后两周时间研究Flutter如何呈现文本后,我对使用工具感到失望。 我们被告知: Flutter分层体系结构使您可以控制屏幕每个像素。 这显然不适用于用于绘制文本像素。...文本框大小和相对位置。这是一个例子: 最接近某个像素位置文本字符索引。在上面的示例中,像素(1、1)对应于字符串中索引0,即“My text line.”字母“ M”。...一种控制文本布局方式方法。 一种在路径上绘制文本方法。 一种无需绘制整个段落即可测量和绘制短文本方法。...艺术文字 进行文字绘画应用程序也将从对文字绘画工具低级别访问中受益。 用文本填充非矩形形状 为了使文本适合非矩形内容,您必须进行大量测量。换行在哪里是另一个难题。...的确,维护起来会更多,开发人员可能偶尔会用它来编写效率低下代码,但我认为自由值得付出代价。使Flutter成为使用任何语言开发任何平台最佳方式。

2.6K30

Flutter开发实战分析-animation_demo解析导读

以下代码基本参考于 flutter_gallery中animation_demo示例。(可以结合本文看源码) 整体动画效果预览 ?...RenderObject可以简单理解成Flutterdom模型,主要是负责布局和绘制。可以继承他实现自己布局协议。 Flutter中内置实现了两种布局协议。...通常,这用于决定是否绘制阴影以模拟位于其下方内容之上内容。通常情况下,如果shrinkOffset处于最大值则为true,否则为false,但这不能保证。...RenderObject 而RenderObject则进行真实布局和绘制。真实 布局代码是在它内完成。...混合工程编译流程 参考 Flutter SDK doc Flutter布局绘制流程简析(一) 深入了解Flutter界面开发(强烈推荐)

2.5K30

Flutter 1.20 下 Hybrid Composition 深度解析

image 如上图所示,简单来说就是原生控件内容被绘制到内存里,然后 Flutter Engine 通过相对应 textureId 就可以获取到控件渲染数据并显示出来。...所以这样好处就是:需要在“iOS平台”视图下方呈现Flutter UI,最终会被绘制到其下方纹理上;而需要在“平台”上方呈现Flutter UI,最终会被绘制在其上方纹理。...,在 10 以下版本中,Flutter 界面在屏幕上呈现速度会变慢,这个开销是因为 Flutter 帧需要与 Android 视图系统同步造成。...image 接着用同样代码在不同位置增加一个 Re 白色小方块,可以看到屏幕右上角又多了一个有布局边界 Re 白色小方块,所以可以看到 Hybrid Composition 模式下 PlatformView...然后我们又发现了另外一个奇怪问题,用 Flutter 默认 Text 绘制蓝色 Re 文本居然也有原生布局边界显示?

2.1K60

Flutter使用Canvas实现微信红包领取效果

这里 sw 是代表屏幕宽度,即红包宽度为屏幕宽度 0.8 倍,高度为屏幕宽度 1.2 倍。...关于 Flutter 屏幕适配,请参阅:Flutter应用框架搭建(二)屏幕适配[2] 然后点击按钮时通过 Overlay 展示出来, 创建一个 showRedPacket 方法: void showRedPacket...红包布局核心代码就在 RedPacketPainter 里,首先绘制红包背景,背景分为上下两部分,上部分又由一个矩形和一个圆弧组成,下半部分同样是由一个矩形和一个圆弧组成,上半部分圆弧是凸出来,...贝塞尔曲线绘制完成后调用 drawShadow 绘制阴影,作用是突出上下两部分连接处效果,最后通过 path 绘制出整个上半部分效果,如下: 下半部分 代码实现如下: void drawBottom...,即示意图第③部分,然后再添加一个圆角矩形,即示意图第④部分;然后绘制下半部分阴影和图形,单独展示下半部分效果如下: 将上下两部分结合起来,就实现了红包背景效果,如下: 金币绘制 背景绘制完成后接下来进行金币绘制

1.6K32

如何处理手势冲突 | 手势导航连载 (三)

这里让我们回到之前提到音乐播放器示例。它包含一个位于屏幕底部进度条,允许用户快进和快退歌曲。...如下方代码,我们给进度条增加了底边距,增加值正好是系统强制交互区高度: ViewCompat.setOnApplyWindowInsetsListener(seekBar) { view, insets...View API 会帮您解决坐标空间之间换算问题。 让我们再次回到之前提到音乐播放器示例,我们现在把播放进度条挪到了控件上方,并且撑满了整个屏幕宽度。...由于这个 API 会一定程度上破坏用户习惯操作,因此系统做出了限制: 屏幕每个边缘最多只能被应用切除 200dp。 开发者听到这个限制时,常会提出以下问题: 为什么要有限制?...不会,系统仅计算屏幕范围内切出矩形。同样,如果视图只有一部分显示在屏幕内,则仅计算所请求矩形屏幕内可见部分。 请关注下一篇连载 读完本文您可能会问: 为什么我们还没有讲流程图右半部分?

4.9K30

最佳实践丨Flutter音视频开发实践

Flutter基础介绍 Flutter简介 Flutter 是 Google 开源 UI 工具包,帮助开发者通过一套代码库高效构建多平台应用,支持Android、IOS、Web、Linux app。...Flutter 与 React Native 设计对比 相比于 RN 转换原生控件,Flutter 则编译为原生代码....Flutter 控制屏幕每个像素,这避免了由于需要 JavaScript 桥接而导致性能问题。 ? ? Flutter框架 ?...Framework:是一个 Dart 实现 UI SDK,从上到下包括了两大组件库、 基础组件库、图形绘制、手势识别、动画等功能。...考虑到Native用户使用习惯,这里我们采用是函数式设计方案。 使用 Flutter SDK 示例 目前我们 Flutter SDK 已经在内测中,部分客户已经开始接入。

1.8K10

Flutter&Flame 游戏 - 伍】 Canvas 参上 | 角色血条

他乡遇故知 - Canvas 小册 《Flutter 绘制指南 - 妙笔生花》可以说是专门为 Canvas 绘制而生。...如下,在 Monster 类中简单画个白框红血条:代码见 【05/02】 下面是绘制简单逻辑,其中主要逻辑是计算外框和血条两个 Rect 矩形对象。...外框白条矩形通过中心点加宽高来确定,因为这里希望血条居中,且可以可以通过比率 widthRadio 控制长度。在白条矩形确定之后,左下角点就能确定,此时通过两点确定矩形会比较方便。...代码复用好帮手 -mixin 我们刚才只在 Monster 类中覆写 render ,绘制血条。...相同绘制逻辑分散在各个类中,不利于维护和拓展。 反过来我们可以想一下,为什么每个构件都可以很简单地使用手势事件,答案是 mixin 。

54630

如何使用Flutter实现58同城中加载动画详解

接下来开始写代码实现。 由于动画是由一个圆弧不断变化组成,如果使用Android,我们很自然想到可以使用Canvas来进行圆弧绘制,然后根据时间变化不停地重新绘制圆弧,从而实现动画效果。...FlutterCanvas Flutter中使用 CustomPainter 类在Canvas上进行绘制,该类包含一个 paint() 方法,该方法提供了一个Canvas对象,可以用来绘制各种图形。...当然,只是绘制出圆弧并没有什么用,主要是怎么让圆弧动起来。 Flutter动画 想要让圆弧动起来,我们需要使用到Flutter动画。下面先来介绍下Flutter中动画实现。...Flutter应用在启动时会绑定一个SchedulerBinding,可以给每一次屏幕刷新添加回调,Ticker就是通过SchedulerBinding来添加屏幕刷新回调,当屏幕刷新时,会通知到绑定...下面是实现加载动画关键代码: import 'dart:math'; import 'package:flutter/material.dart'; class WubaLoadingWidget

1.7K30

Flutter 专题】35 自定义 View 之 Canvas (二)

Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多开发者和组织使用,并且Flutter是完全免费、开源。')...Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多开发者和组织使用,并且Flutter是完全免费、开源。')...Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多开发者和组织使用,并且Flutter是完全免费、开源。')...clipRect 裁剪矩形 clipRect 可以在规定矩形内进行绘制,超出范围不绘制; canvas.clipRect(Rect.fromLTWH(30, 1200, Screen.width /...clipRRect 裁剪圆角矩形 clipRRect 可以在规定圆角矩形内进行绘制,超出范围不绘制; canvas.clipRRect( RRect.fromRectXY(

2.5K41

自定义View概述

代码如下: 代码: ---- import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home...官方肯定也会想到这一点啊,在Flutter中也是支持你自定义viewgetFlutter中与绘制相关是在Painting层次,具体见下图: ?...Flutter架构图 和Flutter自带Wdiget一样,自定义Widget也会经过Skia被编译成原生代码,所以性能上也是不受影响。...画布canvas 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要内容 canvas 拥有多种绘制点、线、路径、矩形、圆形、以及添加图像方法,结合这些方法我们可以绘制出千变万化画面。...Rect 在图形绘制中,一般都是分区域绘制,这个区域一般都是一个矩形,在绘制中通常使用Rect来存储绘制位置信息。

75131

(译)SDL编程入门(8)几何图形渲染

我们将在主循环结束时介绍为什么会发生这种情况。 我们要画第一个基元是填充矩形,也就是一个实心矩形。 首先我们定义一个矩形来定义我们要用颜色填充区域。...这里我们设置矩形在x方向上宽度为屏幕宽度四分之一,在y方向上高度为屏幕高度四分之一,而且宽度/高度为屏幕一半。...你也可以使用SDL_RenderDrawRect[3]绘制一个空心矩形轮廓。正如你所看到那样,它工作原理和一个实心填充矩形差不多,因为这段代码和上面的代码几乎一样。...x轴仍然指向右边,但y轴指向下方,原点在左上方。 所以当我们渲染实体矩形时,坐标系功能是这样: ? 还有一点要知道是,SDL从左上角渲染矩形、表面和纹理。...下面是使用SDL_RenderDrawLine[4]绘制一条像素细线代码。首先我们将颜色设置为蓝色,然后给渲染调用提供起始x/y位置和结束x/y位置。这些位置会使它在屏幕上水平直行。

1.4K30
领券