flutter中分割线效果实现(三种方法)

简介: 第一种:Divider(Double:height,Double:indent,color:color)1.height:分割线Widget的高,不是分割线本身效果的高,可以达到两个Widget 之间margin的效果2.indent:分割线左边缩进长度

第一种:Divider(Double:height,Double:indent,color:color)

1.height:分割线Widget的高,不是分割线本身效果的高,可以达到两个Widget 之间margin的效果

2.indent:分割线左边缩进长度

3.color:分割线的颜色

4.代码示例:

<Widget>[
  Container( height: 65.0,),
    Divider(height: 1.0,indent: 60.0,color: Colors.red,),
    Container( height: 65.0, ),
],

第二种:DecoratedBox(decoration:BoxDecoration(Border:border))

1.新建一个不带child Widget 的装饰容盒子,只使用边框参数,相当于一个没有高度的空白盒子

2.代码示例

DecoratedBox(
  decoration:BoxDecoration(
      border:Border.all(color: Colors.grey[200],width: 1.0)
    ),
),

第三种:用Widget 阴影达到分割线的效果,一个Widget 效果不明显,当两个都有阴影的Widget 相邻的时候就达到的分割线的效果

Container(
  decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[
       BoxShadow(
          color: Colors.grey[300],
         ),
  ]
),
相关文章
|
4月前
|
缓存 前端开发 数据安全/隐私保护
Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验
在移动应用开发中,Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验。本文深入探讨了键盘的显示与隐藏、输入框的焦点管理、键盘类型的适配、输入框高度自适应、键盘遮挡问题处理及性能优化等关键技术,结合实例分析,旨在帮助开发者提升应用的用户体验。
129 6
|
4月前
|
开发框架 前端开发 定位技术
Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证
本文深入探讨了Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证,常见插件市场的介绍,选择合适插件的策略,以及开源资源的利用价值与注意事项。通过案例分析和对社区影响的讨论,展示了这些资源如何促进开发效率和技术进步,并展望了未来的发展趋势。
90 11
|
5月前
|
开发者
flutter:总结所有需要用到的方法与实战 (十六)
本文介绍了Flutter中路由和顶部导航的使用方法,包括简单路由、命名路由、返回及返回根路由的实现。同时,详细讲解了顶部导航的定义与属性设置,并通过实战案例展示了复杂布局、新闻列表和页面制作的思路。最后,还提供了父类向子类传递参数的方法以及如何添加依赖库。
|
8月前
Flutter生命周期方法小技巧
Flutter生命周期方法小技巧
57 0
|
9月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
140 2
|
10月前
|
Dart Android开发 iOS开发
Flutter 弃用 WillPopScope 使用 PopScope 替代方法
了解如何在 Flutter 3.16 中将弃用的 WillPopScope 替换为 PopScope,并学习如何升级您的 Flutter 应用程序。详细指南和最佳实践,帮助您顺利迁移和更新您的导航逻辑。
380 7
Flutter 弃用 WillPopScope 使用 PopScope 替代方法
|
10月前
|
设计模式 JavaScript 开发者
Flutter笔记:聊一聊Flutter中委托的设计方法
Flutter笔记:聊一聊Flutter中委托的设计方法
204 0
|
开发者
Flutter笔记:build方法、构建上下文BuildContext解析
本文主要介绍Flutter中的build方法和构建上下文对象。
543 2
Flutter笔记:build方法、构建上下文BuildContext解析
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1695 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
Flutter实现圆形头像的几种方法
Flutter实现圆形头像的几种方法

热门文章

最新文章

  • 1
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    26
  • 2
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    33
  • 3
    通过外部链接启动 Flutter App(详细介绍及示例)
    31
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    151
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    98
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    59
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    174
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    54
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    82
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    176