002_初识Flutter

Flutter widgets（部件）是从React的现代化框架中获得灵感构建的，其核心思想是用部件构建UI。

Hello world

下面我们来看一个Flutter中最简单的应用

import 'package:flutter/material.dart';

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

在Flutter中构建一个应用，必须使用runApp()函数，在上面这个程序中，使用到了两个部件，一个是Center()部件，一个是Text()部件。
当编写应用程序时，我们通常会创建一个新的部件，这些部件要么来自StatelessWidget or StatefulWidget，这两者的区别可以查看区别文档。部件的主要工作是实现build()函数，一个部件套另一个部件，框架依次构建这些部件，知道流程完成运行到底层的小部件中。

Basic widgets

下面介绍几个Flutter中最常用的几个部件。

Text

Text部件是用来在应用程序中构建一系列由样式的文本。

Row, Column

在CSS3中我们使用flexbox布局模型（也称盒子模型、弹性布局），在flutter中我们使用Row和Column在水平和垂直方向上创建灵活的布局实现flexbox布局模型。

Stack

Stack部件相当于使用CSS3中的position:absolute（采用绝对定位），在Stack组件中，我们可以设置Positioned组件来设置，Stack部件中所有元素是相对于堆栈的顶部、右侧、底部或左侧来进行定位。

Container

Container部件是在当前位置创建一个矩形，就相当于一个容器。Container可以通过使用BoxDecoration进行装饰，例如background、border、shadow等，Container也可以设置margins、padding等属性，需要注意的是如果设置了BoxDecoration就会对Container中设置的某些属性产生冲突。此外，可以使用container在三维空间中变换容器。

下面是几个常用部件的使用

class MyAppBar extends StatelessWidget {
  const MyAppBar({required this.title, super.key});

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Row is a horizontal, linear layout.
      child: Row(
        children: [
          const IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child
          // to fill the available space.
          Expanded(
            child: title,
          ),
          const IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

在这一节中，我们初步了解了Flutter的几个基本的部件，下一节我将介绍构建Flutter最基本的框架。