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

Center简介

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，您可以通过设置宽度和高度来调整部件的大小。如果您只想调整一个维度（宽度或高度），可以将另一个维度设置为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 组件用法很简单,属性也比较少,但是可以满足大多数分隔线场景的需求。