Flutter基础之常用Widget详解一

Qson

发布于 2022-04-11 17:59:07

1.9K0

发布于 2022-04-11 17:59:07

文章被收录于专栏：Hi Flutter

Widget概念

Widget 可理解为原生的UI元素但不仅仅如此，Flutter中的widget概念更广泛，

不仅表示UI元素，
也可以是一些功能性的组件 (如：GestureDetector ,Theme)

在Flutter中，Widget的功能是“描述一个UI元素的配置数据” Widget其实并不是表示最终绘制在屏幕上的显示元素,而只是显示元素的配置数据。Flutter中真正代表屏幕上显示元素的类是Element， Widget只是描述Element的一个配置。Widget只是UI元素的一个配置数据，并且一个Widget可以对应对个Element,这是因为同一个Widget对象可以被添加到UI树的不同部分，而真正渲染时，UI树的每一个Widget节点都会对应一个Elenment对象。

Flutter系统提供了2套UI风格的库，Cupertino widget(iOS 风格)和 Material Design(安卓风格)。

Flutter有一套丰富、强大的基础widget，其中以下是很常用的：

Text：该 widget 可让创建一个带格式的文本。

Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。

Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝对定位（absolute positioning )布局模型设计的。

Container：Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

以下是一些简单的Widget，它们可以组合出其它的Widget：

Text

单个样式的文本字符串组件，支持换行

Row

默认值：MainAxisAlignment.start：

start ，沿着主轴方向(水平方向)顶部对齐；end，沿着主轴方向(水平方向)底部对齐；center，沿着主轴方向(水平方向)居中对齐；spaceBetween ，沿着主轴方向(水平方向)平分剩余空间；spaceAround，把剩余空间平分成n份，n是子widget的数量，然后把其中一份空间分成2份，放在第一个child的前面，和最后一个child的后面；spaceEvenly，把剩余空间平分n+1份，然后平分所有的空间，请注意和spaceAround的区别；

column

默认值：MainAxisAlignment.start：

start ，沿着主轴方向(垂直方向)顶部对齐；end，沿着主轴方向(垂直方向)底部对齐；center，沿着主轴方向(垂直方向)居中对齐；spaceBetween ，沿着主轴方向(垂直方向)平分剩余空间；spaceAround，把剩余空间平分成n份，n是子widget的数量，然后把其中一份空间分成2份，放在第一个child的前面，和最后一个child的后面；6.spaceEvenly，把剩余空间平分n+1份，然后平分所有的空间，请注意和spaceAround的区别；

Padding

Padding 可以给其子节点添加补白(填充)，

Padding({
  ...
  EdgeInsetsGeometry padding,
  Widget child,
})

EdgeInsetsGeometry是一个抽象类，开发中，我们一般都使用EdgeInsets,它是EdgeInsetsGeometry的子类它定义了一些设置补白的便捷方法。

class PaddingTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      //上下左右各添加16像素补白
      padding: EdgeInsets.all(16.0),
      child: Column(
        //显式指定对齐方式为左对齐，排除对齐干扰
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            //左边添加8像素补白
            padding: const EdgeInsets.only(left: 8.0),
            child: Text("Hello world"),
          ),
          Padding(
            //上下各添加8像素补白
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text("I am Jack"),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
            child: Text("Your friend"),
          )
        ],
      ),
    );
  }
}