关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

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

发布时间:2023-06-26 20:00:01

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居中显示。效果如下图:


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



/template/Home/leiyu/PC/Static