Flutter非常常用的几个布局小控件Center,SizeBox,Divider

简介: Flutter非常常用的几个布局小控件Center,SizeBox,Divider

enter简介

Center是Flutter中的一个布局小部件,用于将其子部件居中显示在父部件中。


Center的特点

Center小部件具有以下特点:


将子部件在水平和垂直方向上居中显示。

默认情况下,Center会尽可能将子部件展开以填充可用空间。

如果Center没有确定的宽度和高度限制,它将尝试将子部件调整为其自身大小。

可以通过widthFactor和heightFactor属性来调整子部件的大小。

以下是使用Center小部件的示例代码:

例子

      body: TabBarView(
        controller: _tabController,
        children: [
          // 第一个选项卡的内容
          Container(
            child: Center(
              child: Text('聊天'),
            ),
          ),
          // 第二个选项卡的内容
          Container(
            child: Center(
              child: Text('群组'),
            ),
          ),
          // 第三个选项卡的内容
          Container(
            child: Center(
              child: Text('个人'),
            ),
          ),
        ],
      ),

在上面的示例中,我们使用Center将一个Text居中显示。效果如下图:


3a89b06a7b6742191c65a3b202eca1cf.png

您还可以将其他小部件作为Center的子部件,以实现其他居中效果。Center对于构建居中布局非常方便,尤其在需要在父部件中居中显示子部件时很有用。


SizedBox

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


SizedBox具有以下常用属性:


width:指定SizedBox的宽度。

height:指定SizedBox的高度。

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

使用SizedBox,您可以

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


目录
打赏
0
0
0
0
13
分享
相关文章
优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面
本文探讨了优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面,并通过案例分析展示了具体措施和效果,强调了持续优化的重要性及未来优化方向。
202 10
Flutter控件的显示与隐藏
Flutter控件的显示与隐藏
306 3
Flutter 构建自适应布局
Flutter 构建自适应布局
129 2
Flutter 构建自适应布局
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计,涵盖布局基础、常用组件、样式设计、实战应用、响应式布局及性能优化等方面,助力开发者打造精美用户界面。
110 7
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式,包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理,开发者可以更高效地构建复杂的用户界面。此外,文章还提供了布局优化技巧,帮助提升应用性能。
167 4
|
5月前
|
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起,实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念(如子组件层叠、Positioned 组件和对齐属性),以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法,帮助你构建更加精美和实用的 Flutter 应用。
273 2
Flutter&鸿蒙next 布局架构原理详解
Flutter&鸿蒙next 布局架构原理详解
flutter:&UI布局 (六)
本文档介绍了Flutter中的UI布局方式,包括线性布局(如Column和Row)、非线性布局(如Stack、Flex、Positioned)以及Wrap布局等。通过具体示例代码展示了如何使用这些布局组件来构建灵活多变的用户界面,例如使用Column垂直排列文本、使用Stack叠加组件、以及利用Wrap实现自动换行的按钮布局等。
149 1
如何将JSF应用送上云端?揭秘在Google Cloud Platform上部署JSF应用的神秘步骤
【8月更文挑战第31天】本文详细介绍如何在Google Cloud Platform (GCP) 上部署JavaServer Faces (JSF) 应用。首先,确保已准备好JSF应用并通过Maven构建WAR包。接着,使用Google Cloud SDK登录并配置GCP环境。然后,创建`app.yaml`文件以配置Google App Engine,并使用`gcloud app deploy`命令完成部署。最后,通过`gcloud app browse`访问应用,并利用GCP的监控和日志服务进行管理和故障排查。整个过程简单高效,帮助开发者轻松部署和管理JSF应用。
100 0
|
9月前
|
flutter 布局管理【详解】
flutter 布局管理【详解】
84 3
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等