Flutter开发 - 写一个块状带订单数量角标的个人中心页面，这个布局有点意思

最新推荐文章于 2024-10-22 20:30:00 发布
最新推荐文章于 2024-10-22 20:30:00 发布
阅读量1.8k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： Flutter实用开发技巧合集 文章标签： Flutter 个人中心 Stack 角标 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/107673284
这篇博客介绍了如何使用Flutter构建一个个人中心页面，特别是焦点在于如何利用Stack布局来实现角标位于图标右上角的效果，避免元素变形。内容涵盖了顶部导航栏、头部个人信息和订单Item项的布局实现，提到了Expanded的使用以适应不同长度的文本，并在后续部分讨论了适配问题和解决方案，包括文字居中和宽度调整。

个人中心页面


在这里插入图片描述
为什么要挑这个页面来讲解下布局呢，因为它比较具有代表意义，块状的布局，包含Row，Column，Stack。最主要的是角标的处理方式。在一般的页面中，我们都采用上下布局，左右布局，列表等来做，很巧合的是这里基本都有，同时有一个要注意的点是角标，属于绝对位置的布局。

首先我们来解析一下这个个人中心页面；

  1. 顶部导航栏；
  2. 头部个人信息；
  3. 订单和其他中的Item项（角标要注意下）；

这个页面由三部分组成，我们分别来说下三部分怎么实现：

  • 顶部导航栏
appBar: AppBar(
          backgroundColor: Color.fromRGBO(73, 129, 245,
了解本专栏 订阅专栏 解锁全文 超级会员免费看
flutter个人中心
sinat_33250050的博客
04-28 1168
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class MemberPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: T.
Flutter系列（十）实现个人中心页
摸金校尉的博客
06-23 2053
本文用flutter实现个人中心页布局
flutter底部导航栏添加角标
01-20
import 'package:flutter/material.dart'; class TabsComponent extends StatefulWidget { @override State createState() => new TabsComponentState(); } class TabsComponentState extends State { int _selectedIndex = 0; final List _children = [ new PlaceholderWidget('Home'), new PlaceholderWi
Flutter移动应用开发 - 个人中心界面
如果没有躺赢的命，那就站起来奔跑，你的努力一定会对得起这一路的颠沛流离。
02-07 1185
项目想法脱胎于2023年服务外包大赛A18题 随手买（详情整个APP思路如下：这篇博客主要服务于管理员界面的个人中心界面和乘客界面的个人中心界面。模仿淘宝的设置的设计，就是个壳子，目的是为了方便在点击后回到登陆界面切换账号和用户身份。主要用到 ListTile, CircleAvatar, Card
flutter：角标
weixin_41897680的博客
07-27 3083
flutter：角标
Flutter开发-Flutter架构
AiFlutter的博客
08-15 5100
一般的跨平台框架会在Android和IOS的UI底层库上创建一层抽象，程序代码通常使用JS进行编写，基于与系统进行交互来显示UI界面，当UI和应用逻辑有繁杂的交互时更会如此。Flutter通过 平台通道 调用自定义代码。Flutter是一个可拓展的分层系统，可被视为各个独立组件的集合，上层组件依赖下层，上层无法越界访问更下层的组件，框架内各部分是可选可替代的。Widget思想是 浅而广，最大限度地增加可能的组合数量，每个widget完成一件事，将核心功能抽象，如边距等基础功能，被实现为单独的组件。
Flutter基础 -- Flutter容器布局
原来45的博客
06-05 1739
MaterialAPP 脚手架 Scaffold 线性布局 Column Row 盒模型 Box Model 容器 Container 弹性布局 Flex 层叠布局 Stack 流式布局 Wrap 对齐定位 Align
Flutter 开发系列（四）：布局实例演示与实现-含完整代码
最新发布
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
10-22 2252
通过这个示例，我们创建了一个结构良好的页面，展示了如何使用常见的 Flutter 布局和组件来构建一个具有实际功能的页面。希望这个例子能帮助你理解和实践 Flutter 布局的使用。等组件，构建一个功能齐全的页面。我们将分步展示结构代码，并逐步添加注释与讲解，最后给出完整的代码实现。在这篇文章中，我们将通过一个综合布局实例展示如何有效组合。组件用于创建页面底部的导航栏，包含多个。组件来创建一个带标题的顶部栏，用于创建一个两列的网格布局。来实现垂直排列和网格布局。组件用于实现侧边导航栏，
Flutter学习 — 从新页面返回数据给上一个页面
qq_27494201的博客
06-18 2294
效果图一： 点击按钮 效果图二： 点击YES后，返回上一级页面并传值 效果图三： 收到值，并用底部弹出框显示结果 注释+代码： import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: 'Returning Data', home: new HomeScreen(), )); } class HomeScreen extends StatelessWidget {
Flutter移动应用开发 - 个人简介界面（图片轮播，Card布局）
如果没有躺赢的命，那就站起来奔跑，你的努力一定会对得起这一路的颠沛流离。
02-07 547
项目想法脱胎于2023年服务外包大赛A18题 随手买（详情整个APP思路如下：这篇博客主要服务于个人简介界面，在登录界面点击指纹解锁按钮后进入本界面。本界面主要是在 Card widget 中加入图片轮播，主要涉及 FloatingActionButton 和 Text
First-Flutter-Project-:这是个人资料页面
04-23
flutter_application_12 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
32Flutter仿京东商城项目 用户中心页面布局.rar
03-25
32Flutter仿京东商城项目 用户中心页面布局.rar
Flutter 订单管理 Demo 涵盖大部分控件用法 --新手可以开始学习开发
05-16
Demo中 Flutter开发框架搭建完整，直接抽取出来，就可进入新项目开发。非常方便。 另外本Demo适合新手可以快速学习，上手开发。
flutter_app_icon_badge
03-21
Flutter App图标徽章插件 您可以使用此插件来更改应用程序图标上的徽章 支持平台 的iOS Android-一些Android设备（即使在Oreo上，官方API也不支持该功能） 苹果系统 Windows-进行中（需要帮助） Linux-进行中（需要帮助） 入门 的iOS 在iOS上，需要通知权限才能更新徽章。会自动询问何时添加或删除徽章。 还将以下内容添加到您的Info.plist中： < key>UIBackgroundModes</ key> < array> < string>remote-notification</ string> </ array> 安卓 在Android上，不存在用于在启动器中显示徽章的官方API。但是某些设备（三星，HTC ...）支持该功能。多亏了，支持约16个启动器。 镖 首先，您只需使用以下命令
flutter_template:制作新项目时的个人模板
03-19
NFlutter模板 该项目使用带有NullSafety支持的NFlutter模板（ ）！ 在开始之前，请使用这些插件来确保一切都已设置！ dio : 4.0.0-beta7 # Use nullsafety version provider : any shimmer : ^2.0.0-nullsafety.0 # Use nullsafety version cached_network_image : ^3.0.0-nullsafety # User nullsafety veresion shared_preferences : any ndialog : any 小工具的东西！ 定制分隔线 您可以使用ColumnDivider和RowDivider来使小部件之间RowDivider距离，默认间距为10（可以在customDivider.dart上进行更改
flutter添加角标（Android应用）
InutsukaKiba的博客
11-27 3857
因为iOS可以直接在推送的时候后台设置角标，Android不行，所以在flutter中，设置角标还得在Android中，要不适配不了太多机型，我的思路就是在flutter中获取角标显示数量，然后在通过flutter传值到Android原生，在原生里去设置角标 首先在Android中创建一个角标的工具类 import android.app.Notification; import android.app.NotificationChannel; import android.app.Notification
Flutter-防京东商城项目-编写个人中心UI界面-32
weixin_38716347的博客
09-05 671
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 配置图片 把下面的图片文件复制进来 回到下面的文件配置图片 回到个人中心把内容替换掉。 import 'package:flutter_app/services/screenAdaper.dart'; @override Widget build(BuildContext
Flutter从入门到奔溃（二）：撸一个个人中心界面
weixin_34278190的博客
08-17 1940
[toc] Flutter从入门到奔溃（二）：撸一个个人中心界面 前记 上面我们撸了一个登录界面，因为很简单，而且是属于入门级别。 然后我发现我中毒了... 这种布局写起来挺好玩的... 我开始鄙视xml了... 上一篇遗留问题的答复 上一篇文章吐槽了一下Flutter里面listView的滑动会有点卡顿，然后到了开发群问了下大佬，最后的解决方案是： 打release包体验下什么叫纵享丝滑 具体原...
Flutter 个人中心页面的登录按钮Hero动画过渡
weixin_38107457的博客
06-05 365
Flutter 个人中心页面的登录按钮Hero动画过渡
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

CodingFire

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

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

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

打赏作者

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

抵扣说明：

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

余额充值