flutter实现分割线的三种方法
  CpwfxCg9mmk0 2023年12月11日 10 0


flutter实现分割线的三种方法_javascript

flutter在目前来说 ,由于其跨平台,得到了许多人的 青睐!

flutter中经常会遇到要实现分割线效果,以达到层级效果,那么,今天他来了。

我用到的主要有以下三种,

第一种: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))

不仅仅是在container中

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],
         ),
 ]
),

以上就是我用到的三种方法,你呢?

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

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

  • 第一章 Dart语言基础
  • 第二章 Dart 异步编程
  • flutter实现分割线的三种方法_Dart_02

  • 第三章 异步之 Stream 详解
  • 第四章 Dart标准输入输出流
  • flutter实现分割线的三种方法_Dart_03

  • 第五章 Dart 网络编程
  • 第六章 Flutter 爬虫与服务端
  • flutter实现分割线的三种方法_Dart_04

  • 第七章 Dart 的服务端开发
  • 第八章 Dart 调用C语言混合编程
  • 第九章 LuaDardo中Dart与Lua的相互调用
  • flutter实现分割线的三种方法_javascript_05

《Flutter实战:第二版》

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

flutter实现分割线的三种方法_flutter_06

  • 第六章:可滚动组件
  • 第七章:功能型组件
  • 第八章:事件处理与通知
  • 第九章:动画
  • 第十章:自定义组件
  • flutter实现分割线的三种方法_javascript_07

  • 第十一章:文件操作与网络请求
  • 第十二章:Flutter扩展
  • 第十三章:国际化
  • 第十四章:Flutter核心原理
  • 第十五章:一个完整的Flutter应用
  • flutter实现分割线的三种方法_Dart_08

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月11日 0

暂无评论

推荐阅读
CpwfxCg9mmk0