flutter两个非常常用的布局小空间SizedBox和Divider

简介: flutter两个非常常用的布局小空间SizedBox和Divider

SizedBox

SizedBox是Flutter中的一个小部件(widget),用于创建具有指定尺寸的空白框。它通常用于调整和控制布局中的间距、大小和位置。


SizedBox具有以下常用属性:


width:指定SizedBox的宽度。

height:指定SizedBox的高度。

child:指定SizedBox中包含的子部件。

使用SizedBox,您可以通过设置宽度和高度来调整部件的大小。如果您只想调整一个维度(宽度或高度),可以将另一个维度设置为null或忽略它。


以下是一个示例,演示如何使用SizedBox调整部件的大小:

Copy code
Container(
  color: Colors.blue,
  child: SizedBox(
    width: 200,
    height: 100,
    child: Text(
      'Hello, SizedBox!',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
)

在上面的示例中,我们创建了一个蓝色的Container,并在其中使用SizedBox设置宽度为200和高度为100。SizedBox的子部件是一个文本部件,显示为白色,字体大小为24。


通过调整SizedBox的宽度和高度属性,您可以根据需要调整部件的大小,并将其用于布局和间距的控制。


Divider

Flutter 中也有 Divider 组件,用于构建分隔线。它的主要属性有:


height: 分隔线的高度,默认 1px。

thickness: 分隔线的粗细,默认 1px。

color: 分隔线的颜色,默认当前主题的 dividerColor。

indent: 分隔线左边的缩进,默认 0。

endIndent: 分隔线右边的缩进,默认 0。

使用 Divider 的基本方式有:

1.水平分割线

dart

Divider(

height: 30,

color: Colors.red,

)

2.垂直分割线

dart

Divider(

thickness: 30,

color: Colors.red,

indent: 20,

endIndent: 20,

)

3.在列表项之间添加分割线

dart

ListTile(title: Text(‘Item 1’)),

Divider(),

ListTile(title: Text(‘Item 2’)),

4.嵌套在 Container 中,并添加 padding

Container(
  color: Colors.grey,
  child: Padding(
    padding: EdgeInsets.all(10.0),
    child: Divider(
      color: Colors.red,
    ),
  )  
)

Flutter 的 Divider 组件用法很简单,属性也比较少,但是可以满足大多数分隔线场景的需求


相关文章
|
2月前
|
编解码 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
【4月更文挑战第30天】Flutter框架助力移动应用实现响应式设计与自适应布局,通过层次化布局系统和`Widget`树管理,结合`BoxConstraints`定义尺寸范围,实现自适应。利用`MediaQuery`获取设备信息,调整布局以适应不同屏幕。`FractionallySizedBox`按比例设定尺寸,`LayoutBuilder`动态计算布局。借助这些工具,开发者能创建跨屏幕尺寸、方向兼容的应用,提升用户体验。
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
|
2月前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
11天前
|
容器
flutter 布局管理【详解】
flutter 布局管理【详解】
11 3
|
12天前
Flutter-自定义折叠流布局实现
Flutter-自定义折叠流布局实现
13 0
|
2月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
2月前
|
容器
Flutter笔记:Box协议的布局约束原理与应用
Flutter笔记:Box协议的布局约束原理与应用
68 0
|
2月前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
177 0
Flutter灵活布局要掌握的两个控件Expanded和Flexible
Flutter灵活布局要掌握的两个控件Expanded和Flexible
利用Flutter的LayoutBuilder、BoxConstraints创建自适应布局控件
利用Flutter的LayoutBuilder、BoxConstraints创建自适应布局控件
|
Dart 容器
Flutter非常常用的几个布局小控件Center,SizeBox,Divider
Flutter非常常用的几个布局小控件Center,SizeBox,Divider