美文网首页
Flutter基础篇——常用Widget

Flutter基础篇——常用Widget

作者: _破晓之翼 | 来源:发表于2020-05-22 21:55 被阅读0次

    对于初学flutter的朋友来说,要知道,flutter的UI万物皆Widget。
    flutter所写的页面的结构可以被看成套娃,一层套一层,一层套一层,一层套一层。。。。。。

    Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时,widget会重新构建UI,Flutter会对比前后变化的不同, 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。


    以下是一些常用的Widget:

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

    RowColumn: 这些具有弹性空间的布局类Widget可让您在水平(Row)和垂直(Column)方向上创建灵活的布局。

    Stack:取代线性布局 (和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。

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

    具体的演示见我另外的博客


    Widget的结构存在差异

    有一部分Widget都有一个child属性,用于容纳唯一的子Widget。
    例如:Container、Center、Padding、Align等Widget。

    Container(
              color: Colors.amberAccent,//背景颜色
              child: Text("我是工具字符串"),
            ),
    
    容纳唯一的子Widget

    还有一部分Widget允许存在多个子Widget,用children作为属性。
    例如:Row、Column、Stack等Widget。

    Container(
              color: Colors.amberAccent,
              child: Column(
                children: <Widget>[
                  Text("我是工具字符串1"),
                  Text("我是工具字符串2"),
                  Text("我是工具字符串3"),
                ],
              )
            ),
    
    允许存在多个子Widget
    响应widget生命周期事件

    在StatefulWidget调用createState之后,框架将新的状态插入树种,然后调用状态对象的initState。子类化State可以重写initState,以完成仅需要一次执行的工作。当然在initState的实现中需要调用super.initState

    当一个状态对象不再需要时,框架调用状态对象的dispose。也可以通过覆盖dispose方法来执行清理工作。

    OVER~

    相关文章

      网友评论

          本文标题:Flutter基础篇——常用Widget

          本文链接:https://www.haomeiwen.com/subject/zubjohtx.html