Flutter Divider和VerticalDiVider 为啥有些时候不展示?

最新推荐文章于 2024-10-24 22:20:56 发布

iOSTianNan

最新推荐文章于 2024-10-24 22:20:56 发布

阅读量7.3k

点赞数 3

分类专栏： Flutter 文章标签： Flutter Divider VerticalDivider 不展示 Container

本文链接：https://blog.csdn.net/iOSTianNan/article/details/108489993

版权

在Flutter中，使用Divider和VerticalDivider绘制横线、竖线时，有时会出现不显示的问题。这通常是由于它们所在容器的宽高没有正确设置。Divider需要SizeBox并设置宽度，而VerticalDivider需Container并设置高度。如果不这样做，将无法看到预期的UI效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候为了方便画横线竖线, 我们会用到Divider 或则VerticalDivider, 当然也可以用COntainer 直接画,

有时候发现 Divider 或则 VerticalDivider 在某些情况下不展示问题

主要原因还是由于包裹他们的容器, 本身的宽高没有设置或者没有被撑起来,
需要我们自己设置一下.

但是,
我测试发现
Divider 或则 VerticalDivider 两个对容器的要求还不一样

Divider

对于Divider , 需要使用SizeBox 容器包裹, 并且设置一定的width, 否则直接在COntainer里面设置width ,也不起效果

VerticalDivider

对于VerticalDivider, 需要用COntainer容器包裹, 并且设置一定的Height, 否则看不出UI 效果

  /// 注册/忘记密码按钮
  Widget buildRegist(context) {
   
    return Container(
      height:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iOSTianNan

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

《Flutter 控件大全》第三十七个：Divider和VerticalDivider

老孟Flutter

04-04

2486

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 Divider Divider是一个分割线控件。基本用法如下： Divider( hei...

【Flutter 面试题】讲一下 Dart 中 ?? 与 ??= 的区别

Code Metaverse

05-15

660

在实际应用中，这两种运算符常用于数据处理和状态管理，特别是在处理来自外部数据源的不确定性数据时。例如，在网络请求返回的数据可能为 null 的场景下，使用 ?? 可以为某些关键变量提供默认值，从而确保程序逻辑的连贯性和稳定性。同样，??= 在设置配置选项的默认值时也极为有用，它允许程序在不覆盖已有值的情况下，为配置项提供初始值。

3 条评论您还未登录，请先登录后发表或查看评论

listview divider分割线不能显示问题

07-04

2987

在android应用中，listview是经常使用的控件之一，对于此控件的分割线divider,可以通过静态布局(android:divider和android:dividerHeight)或者动态java编码设置(通过设置setDivider()和setDividerHeight())，但是，有一点需要注意:当我们设置好后如果再通过动态代码修改的，需要同时设置这两项，并且分割线高度不能为0，否则

android--解决listview的footerDivider不显示的问题(解决方案)

程序员的良师益友

01-26

1678

对于很多android开发者来说，listview的divider是个比较头痛的麻烦，因为listview在默认的情况下是启用footerDivider的（即android:footerDividersEnabled="true"），但实际上为什么就没有显示footerDivider呢？答案很简单：因为一般情况下你的footerView是空的(null)。当footerView为空的时候，foot

Android使用ListView divider属性设置分界线，显示不出来的问题

GEM_yaorao的博客

08-27

4555

使用divider这个属性，要重新设置dividerHeight高度， android:dividerHeight="1dp"。 android:divider="#dbdbdb" android:background="#C2EBE2" android:dividerHeight="1dp" android:layout_

Flutter 竖线垂直分割线

最新发布

crasowas的博客

10-24

1317

最近客服反馈了一个奇怪的问题，有个用户反馈其他问题时给了应用截图，然后他发现这截图中有一条奇怪的白线。他在自己手机上没有发现这个问题，于是提工单反馈到我这。

Flutter垂直的分割线，调整两边的子组件的宽度

wangjq_piao的专栏

11-22

898

Flutter垂直的分割线，调整两边的子组件的宽度

Flutter 中的 VerticalDivider 小部件：全面指南

smileKH的博客

05-15

951

是 Flutter 中的一个专门的小部件，用于创建垂直的分隔线，它通常用于在行或卡片等布局元素之间提供视觉分隔，以增强界面的组织性和清晰度。thickness: 2.0, // 分隔线厚度color: Colors.black, // 分隔线颜色。

Flutter 中的 Divider 小部件：全面指南

smileKH的博客

05-15

2271

Divider是 Flutter 中的一个轻量级小部件，用于创建一条细线，它可以水平或垂直地分隔内容。Divider通常用于列表、菜单和其他需要视觉分隔的场合。DividerDivider(height: 2.0, // 分隔线高度thickness: 1.0, // 分隔线厚度color: Colors.grey, // 分隔线颜色indent: 20.0, // 左缩进endIndent: 20.0, // 右缩进。

Flet教程之 19 VerticalDivider 分隔符组件基础入门（教程含源码）

iCloudEnd的博客

07-07

560

Flet 是一个框架，使您能够轻松地以您喜欢的语言构建实时 Web、移动和桌面应用程序，并与您的团队安全地共享它们。无需前端经验。一条细的垂直线，两边都有填充。在材料设计语言中，这代表了一个分隔符。...

Compose Material3 新增垂直分隔符（VerticalDivider）解析与疑惑

sinat_17133389的博客

10-17

520

element-ui中获取el-divider的组件的ref时为空

qq_42372534的博客

11-06

1168

【代码】element-ui中获取el-divider的组件的ref时为空。

Flutter-设置分割线Divider

IT技术专栏

08-05

1万+

Divider( height: 1.0, indent: 0.0, color: MyColors.color_gray_150, ),

Flutter 使Row的子元素可以自适应高度

gaoyp的专栏

09-30

3350

https://stackoverflow.com/questions/52113356/flutter-vertical-divider-as-tall-as-its-parent You can use IntrinsicHeight for this. I used Container for my divider in this example, because I needed border radius on my divider, but you can use VerticalDivid

flutter divider的bug

09-18

578

flutter里面有一个divider空间，可以非常方便地设置一个分割线，但是有时候会遇到bug，就是显示的高度有问题，这个时候还是要用其他控件代替

基于Flutter和JavaScript打造的投资组合展示网站

- “Flutter任何安装了Flutter SDK并配置了Flutter Web的IDE（例如IntelliJ，VSCode等）”说明了开发者需要使用支持Flutter的集成开发环境（IDE），并且已经完成了Flutter SDK的安装和配置工作。IntelliJ IDEA和...