Flutter之Stepper源码浅析

最新推荐文章于 2024-06-09 19:07:14 发布
最新推荐文章于 2024-06-09 19:07:14 发布
阅读量1.6k 收藏 3
点赞数 5
分类专栏： Flutter从入门到精通 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunqiuwei/article/details/93769205
版权
本文深入解析Flutter的Stepper组件，从Row和Column组件的基础知识出发，详细剖析Stepper的实现原理。文章通过分析_stepperState._buildVertical方法，展示了Stepper如何通过ListView构建Step，并探讨了Step的各个部分，包括线条、内容和控制按钮的布局。同时，文章提供了去除默认控制按钮的方法，并介绍了线条与圆点完美对齐的关键参数。
摘要由CSDN通过智能技术生成

在博客《Flutter之Stepper简单应用》一文中简单介绍了Stepper的使用方法，现在趁热打铁，就其实现原理来解析一波，算是加深对Flutter相关知识的学习。
在开篇之前需要简单的了解Flutter的如下知识储备：
Row组件:用来水平排列一个布局
Column组件：用来竖直排列一个布局。

下面就来详细分析Stepper的实现原理，我们知道Stepper运行效果如下所示（图1）：
在这里插入图片描述
观察其源码可知，整个跟布局是一个ListView,在_StepperState整个类的build(BuildContext context)方法里可以看出端倪:

  @override
  Widget build(BuildContext context) {
    switch (widget.type) {
      case StepperTy
了解本专栏 订阅专栏 解锁全文 超级会员免费看
郭梧悠
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
订阅专栏
Flutter实战之Stepper入门
菜鸟博客
06-19 4126
Stepper组件展示了一些列的步骤。这个组件可以让我们处理这样的逻辑：让前一步（step)完成的时候，下一个步骤（step）才能开始的一系列相关的事件，其运行效果。可能描述的不是太清楚，具体效果可以看官网给的例子图片： 在这里就详细的说一下Stepper组件的用法： 每一个步骤（step)都有如下的状态（StepState): ...
Flutter Stepper 步骤
10-21
Flutter Stepper 步骤
Flutter 之 Stepper
Dream It Possible
11-07 1471
Stepper 是 flutter 提供的步骤选择器。
Flutter项目开发模版，开箱即用
最新发布
Lan_Se_Tian_Ma的博客
06-09 1208
每当我们开始一个新项目，都会 引入常用库、封装工具类，配置环境等等，我了一些文档，将这些，得到了一个的Flutter开发模版，即使看不懂封装的工具对象原理，也没关系，，小白也可以快速开发Flutter项目。
Flutter的Stepper
江上清风山间明月的博客
07-08 1145
Flutter的Stepper widget是一个用于创建具有多个步骤的向导/流程的非常实用的组件。每个步骤通常包含一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。
flutter 步骤控件 Stepper
丿灬安之若死
03-15 594
import 'package:flutter/material.dart'; class StepperDemoState extends StatefulWidget { @override _StepperDemoStateState createState() => _StepperDemoStateState(); } class _StepperDemoStateState extends State<StepperDemoState> { int _cu...
电商购物平台Flutter双端APP源码Flutter App
04-01
电商购物平台Flutter双端APP源码，是电商CMS购物系统的配套APP，可以编译生成Android和iOS端APP。 - 固定产品价格的数字格式 - Firebase白屏修复 - 购物车摘要问题已修复 - 推特登录 - 应用默认语言 - 通过离线支付...
flutter线上项目源码
09-28
在这个名为"flutter线上项目源码"的压缩包中，包含了一个基于Flutter的小型项目的所有源代码，我们可以深入探讨其中涉及的关键知识点。 首先，我们要了解Flutter的基本结构。Flutter项目通常由以下几个主要部分组成...
收集GitHub上的Flutter开源项目源码_2021_03_20.zip
03-20
这个压缩包文件"收集GitHub上的Flutter开源项目源码_2021_03_20.zip"显然包含了2021年3月20日时，GitHub上的一些Flutter开源项目的源代码。这些源码对于开发者来说是极其宝贵的资源，可以用来学习、参考和实践...
Flutter 中的 Stepper 小部件：全面指南
smileKH的博客
05-16 551
Stepper是一个容器小部件，它包含了一系列步骤（Step），每个步骤代表向导流程中的一个阶段。用户可以点击按钮在步骤之间前进或后退。Stepper可以是水平的，也可以是垂直的，并且可以根据应用的设计语言进行定制。StepperStepper(type: StepperType.horizontal, // 设置为水平布局currentStep: _currentStep, // 从状态管理中获取当前步骤});
Flutter实现的时间轴
08-10
Flutter 实现的时间轴
Flutter | 自定义一个 Stepper 步骤组件
Flutter笔记
08-01 2608
起因前段时间群里的一个小伙伴问了这样一个 UI：因为当时了解过Material组件库里有一个Stepper控件，是类似的效果，我就和他说，可以魔改一下Stepp...
Flutter组件--步骤列表Stepper
eastWind1101的博客
10-24 372
Stepper步骤列表
Flutter 组件教程之用于创建易于定制的水平和垂直步进器 （教程含源码）
iCloudEnd的博客
08-15 284
Flutter 组件教程之用于创建易于定制的水平和垂直步进器。
Flutter基础
04-06
本课程主要介绍Flutter的核心知识。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装，Flutter布局，常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。
Flutter整套案例源码
10-16 1343
本Flutter案例是一个完整的项目源码，flutter版本：2.10.4，Dart版本：2.16.2
Flutter Engine 绘制流程源码解析
weixin_42730336的博客
06-19 954
如果只看Flutter Engine里的关键绘制流程，其实并不复杂，就是一系列的Skia API调用。为了提高绘制效率，最理想的方式是找出相邻两帧的差异，只重绘差异的区域，所以加了layer层的设计，通过比较两个layer tree的不同来确定有差异的区域，然后调用SkCanvas::clipRect裁剪出这块区域，配合SkCanvas::quickReject做快速裁剪测试，从而确定哪些layer需要重绘，提高绘制性能。
简单实现一下Flutter的Stepper做一个侧边进度条
06-08
好的，我可以为您演示如何使用Flutter的Stepper来实现一个侧边进度条。 首先，我们需要在Flutter项目中添加Stepper组件的依赖。在pubspec.yaml文件中，添加如下代码： ```yaml dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 flutter_stepper: ^0.1.2 ``` 然后，我们在Flutter页面中创建一个StatefulWidget来显示Stepper组件。在这个例子中，我们将使用一个简单的列表来演示一个侧边进度条。 ```dart import 'package:flutter/material.dart'; import 'package:flutter_stepper/flutter_stepper.dart'; class SideProgressBar extends StatefulWidget { @override _SideProgressBarState createState() => _SideProgressBarState(); } class _SideProgressBarState extends State<SideProgressBar> { int _currentStep = 0; List<Step> _steps = [ Step( title: Text('Step 1'), content: Text('This is the first step.'), isActive: true, ), Step( title: Text('Step 2'), content: Text('This is the second step.'), isActive: true, ), Step( title: Text('Step 3'), content: Text('This is the third step.'), isActive: true, ), ]; @override Widget build(BuildContext context) { return Scaffold( body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Expanded( child: Stepper( currentStep: _currentStep, steps: _steps, type: StepperType.vertical, onStepTapped: (int step) { setState(() { _currentStep = step; }); }, onStepContinue: () { setState(() { if (_currentStep < _steps.length - 1) { _currentStep++; } }); }, onStepCancel: () { setState(() { if (_currentStep > 0) { _currentStep--; } }); }, ), ), ], ), ), ); } } ``` 在这个示例中，我们使用了一个包含三个步骤的列表。我们还定义了一个_currentStep变量来跟踪当前步骤，并将Stepper组件包装在一个Expanded组件中，以便使它在屏幕上占用尽可能多的空间。 通过添加onStepTapped、onStepContinue和onStepCancel回调函数，我们可以让用户通过点击侧边进度条上的步骤来导航，或者通过点击“下一步”和“上一步”按钮来移动到下一个或上一个步骤。 最后，我们将整个Stepper包装在一个Scaffold组件内，以便在屏幕上显示。现在，您可以运行这个应用程序并查看您的侧边进度条是否正确显示。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭梧悠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值