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

2023-11-16

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 组件用法很简单,属性也比较少,但是可以满足大多数分隔线场景的需求。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

flutter两个非常常用的布局小空间SizedBox和Divider 的相关文章

随机推荐

  • 强化学习学习

    强化学习一些基本概念 强化学习是除了监督学习和无监督学习的第三种机器学习方法 监督学习 Supervised Learning 是从外部监督者提供的带标注训练集中进行学习 任务驱动 无监督学习 Unsupervised Learning 是
  • 003 C++基础篇

    前言 大家好 本文将会向您介绍引用 定义 使用场景 引用与值分别作为返回值和参数时的性能比较 引用的权限 引用 一 引用是什么 引用 定义一个变量的别名 不是新定义一个变量 而是给已经存在的变量取了一个别名 编译器不会为引用变量单独开辟一个
  • WPF应用程序最小化到系统托盘

    using System using System Collections Generic using System ComponentModel using System Windows using System Windows Inpu
  • Unity3D跑酷游戏开发-游戏结束分数排名当前高能显示 (原创教程)

    一般游戏结束后都会有个分数排名板 接下来让分析这功能 1 游戏结束后显示高分排列 当前玩家分数高能显示 如果能进入排名板 2 数据必须持久化 切换场景 关闭开启游戏都要能用 流程 游戏结束后 调出排名板 1 取得上次的所有排名数据保存到li
  • elasticsearch查询

    环境 es1 3 eclipse jdk1 8 问题 刚开始用游标查询 再用游标获取数据 查询耗时较慢 解决办法 不使用游标查询 直接根据条件查询 es查询参考网址 https www cnblogs com chenyuanbo p 10
  • 数据库内连接、左外连接、右外连接中的on、and、where条件使用

    数据库各种连接方式的on and where条件使用 文章目录 前言 使用on条件 A为主表 使用on条件 B为主表 使用on and主表条件 使用on where主表条件 使用on and条件 a type lt gt 1 使用on wh
  • GOME-2 SIF 数据链接

    目录 一 xiao Jinfeng 文章GOME 2 SIF 数据链接 网站 说明 引用 网页预览 一 xiao Jinfeng 文章GOME 2 SIF 数据链接 网站 https acd ext gsfc nasa gov People
  • 支持向量机算法(SVM)详细讲解(含手推公式)(《机器学习》--周志华)

    前言 本人是一个本科到研究生都坚持本专业的人 但是 本科时间被狗吃了 目前还是小白一只 曾经以为考研之后要继续学习一技之长找个工作养活自己 当然 现在发现这都是自己想太多了 哈哈哈 读研之后才知道基础不好的人学习起来是多么困难 但是 既然选
  • 深度学习实战:使用 PyTorch 和序列到序列(Seq2Seq)模型进行机器翻译

    机器翻译是自然语言处理中的一个重要任务 它涉及将一种语言的文本转换为另一种语言的文本 序列到序列 Seq2Seq 模型是一种强大的深度学习模型 用于处理机器翻译任务 在本篇博客中 我们将使用 PyTorch 和 Seq2Seq 模型进行机器
  • 我00后,会Python,月薪5000,兼职1.5w

    当代年轻人的终极烦恼 没钱 主业收入不高但处处都要花钱 特别是今年以来 很多人会在后台问我 做些什么副业好 兼职写文 不知道上哪儿找单 自己也不一定写得好 做wei商 被朋友屏蔽 没有客源也出不了单 摆地摊 东西卖不出去反而倒贴了一笔钱 淘
  • vue中实现点击展开和收起功能(具有动画效果)

    vue中实现点击展开和收起功能 具有动画效果 html div class marketplace aside b div class marketplace aside show that item text div div
  • 一个好玩的小游戏——麻神之战

    题目 一种新的麻将 只留下一种花色 并且除去了一些特殊和牌方式 例如七对子等 规则如下 共有36张牌 每张牌是1 9 每个数字4张牌 你手里有其中的14张牌 如果这14张牌满足如下条件 即算作和牌 14张牌中有2张相同数字的牌 称为雀头 除
  • Java 同步JSON字符串至ES(Elasticsearch) 添加时间戳(@timestamp)、版本(@version) 字段

    解决方法 仿照logstash同步原理 对于同步json字符串 首先将其解析 然后添加时间戳和版本字段 或其他字段 打入es public void insertEs String jsonStr JSONObject jsonObject
  • 95-36-210-ChannelHandler-系统Channel-TimeoutHandler

    文章目录 1 概述 2 继承体系 3 IdleStateHandler 3 1 典型构造方法 3 2 初始化方法 initialize 3 3 销毁方法destroy 3 4 核心的调度任务 ReaderIdleTimeoutTask 1
  • QT的补充知识

    一 文件 QFile QT提供了QFile类用于对文件进行读写操作 也提供了其他的两个类 文本流 QTextSream 和数据流 QDataStream 文本流 QTextSream 用于对文本数据的处理 并且是以字为单位进行读 写 数据流
  • 获取执行计划——使用动态性能视图和AWR、Statspacks

    上一篇中讲了如何使用EXPLAIN PLAN方法来获取sql执行计划 这篇继续讲另两种方法 使用动态性能视图和AWR报告 一 使用动态性能视图 查询动态性能视图我们可以获取丰富的信息 包括执行计划与游标信息等等 下面罗列几个常用的v 视图
  • Python IDLE 自动提示功能

    Python27 Lib idlelib 目录下 config extensions def文件修改等待时间 AutoComplete enable 1 popupwait 2000 2000表示2秒 修改为0 AutoComplete p
  • 分享一个页面

    先看效果 看下代码
  • 34. 注入篇——Cookie注入

    Cookie注入原理 1 数据读取流程 对于WEB服务器而言 读取数据的流程是先取GET中的数据 如果GET中没有数据信息 那么再取POST中的数据 如果POST中也没有那么就会去取COOKIE中的数据 2 防注入系统的常例 系统一般只会对
  • flutter两个非常常用的布局小空间SizedBox和Divider

    SizedBox SizedBox是Flutter中的一个小部件 widget 用于创建具有指定尺寸的空白框 它通常用于调整和控制布局中的间距 大小和位置 SizedBox具有以下常用属性 width 指定SizedBox的宽度 heigh