Flutter学习笔记(一)

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

Hello World

从一个最简单的Flutter应用程序Hello World分析，如下面示例代码:

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

 

该runApp函数接受给定的widget并使其成为widget树的根。在此示例中，widget树由两个widget: Center(及其子widget)和Text组成。框架强制根widget覆盖整个屏幕，这意味着文本“Hello，World”会居中显示在屏幕上。文本显示的方向需要在Text实例中指定，当使用MaterialApp时，文本的方向将自动设定。

在编写应用程序时，通常会创建新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget，具体的选择取决于您的widget是否需要管理一些状态。widget的主要工作是实现一个build函数，用以构建自身。一个widget通常由一些较低级别widget组成。Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最底层的widget通常为RenderObject,它会计算并描述widget的几何形状。

基础Widget

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

• Text: 该widget可创建一个格式的文本。
• Row、Column: 这些具有弹性空间的布局类Widget可让您在水平(Row)和垂直(Column)方向上创建灵活的布局。其设计是基于web开发中Flexbox布局模型。
• stack: 取代线性布局，stack允许子widget堆叠，你可以使用Positioned来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位布局模型设计的。
• Container: Container可让您创建矩形视觉元素。container可以装饰为一个BoxDecoration，如background、一个边框、或者一个阴影。Container也可以具有边距、填充和应用于其大小的约束。另外Container可以使用矩阵在三维空间中对其进行变化。

为了继承主题数据，widget需要位于MaterialApp内才能正常显示，因此我们使用MaterialApp来运行该应用。

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: MyScanffold()
    )
  );
}

class MyScanffold extends StatelessWidget {
  const MyScanffold({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          MyAppBar(),
          Expanded(
              child: Center(
                child: Text("Hello, world"),
              )
          )
        ],
      ),
    );
  }
}

class MyAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0, // 单位是逻辑上的像素(并非真实的像素，类似于浏览器中的像素)
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      child: Row(
        children: [
          IconButton(
              onPressed: null,
              icon: Icon(Icons.menu),
              tooltip: "Navigation menu",
          ),
          Expanded(child: Text(
            "Example title",
            style: Theme.of(context).primaryTextTheme.title,
          ),),
          IconButton(
              onPressed: null,
              icon: Icon(Icons.search),
              tooltip: "Search",
          )
        ],
      ),
    );
  }
}

 

在MyAppBar中创建一个Container，高度为56像素，其左侧和右侧均有8像素的填充。在容器内部，MyAppBar使用Row布局来排列其子项。中间的title widget被标记为Expanded，这意味着它会填充尚未被其他子项占用的剩余可用空间。Expanded可以拥有多个children，然后使用flex参数来确定他们占用剩余空间的比例。

MyScaffold 通过一个Column widget,在垂直方向排列其子项。在Column的顶部，放置了一个MyAppBar实例，将一个Text widget作为其标题传递给应用程序栏。将widget作为参数传递给其他widget是一种强大的技术，可以让您创建各种复杂的widget。最后，MyScaffold使用了一个Expanded来填充剩余的空间，正中间包含一条message。