flutter widgets简介

淡淡的烟草味﹌ 2021-12-04 05:19 327阅读 0赞

> Flutter 从 React 中吸取灵感，通过现代化框架创建出精美的组件。它的核心思想是用 widget 来构建你的 UI  
> 界面。Widget 描述了在当前的配置和状态下，视图所应该呈现的样子。当 widget 的状态改变时，它会重新构建其描述（展示的  
> UI），框架则会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

在开始之前，我们首先看一下flutter程序的目录结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]

*  android——包含Android特定文件的Android子工程
 *  build——是运行项目的时候生成的编译文件，即Android和iOS的构建产物
 *  ios——包含iOS特定文件的iOS子工程
 *  lib——Flutter应用源文件目录，我们自己写的Dart文件都放进lib文件夹中
 *  test——测试文件
 *  pubspec.yaml——管理第三方库及资源的配置文件

Flutter自身的代码、资源、配置和依赖以外，Flutter工程还包含了Android和iOS的工程目录。Flutter虽然是跨平台方案，但却需要一个容器最终运行到Android和iOS平台上，实际上就是一个同时内嵌了Android和iOS原生子工程的父工程。  
某些复杂的场景需要原生应用来实现供对应的Flutter代码引用。Flutter会将相关的依赖和构建产物注入这两个子工程，最终集成到各自的项目中。而我们开发的Flutter代码，最终则会以原生工程的形式运行。

其中lib目录下有一个main.dart文件，这个就是我们flutter应用的入口文件。修改main.dart文件内容如下：

import 'package:flutter/material.dart';
    
    void main() {
      runApp(
        Center(
          child: Text(
            'Hello, world!',
            textDirection: TextDirection.ltr,
          ),
        ),
      );
    }

其中main是dart的入口方法，而runApp则是flutter的入口方法。  
在写应用的过程中，取决于是否需要管理状态，你通常会创建一个新的组件继承 StatelessWidget 或 StatefulWidget。Widget 的主要工作是实现 build 方法，该方法根据其它较低级别的 widget 来描述这个 widget。框架会逐一构建这些 widget，直到最底层的描述 widget 几何形状的 RenderObject。

我们常见到的main.dart可能是下面的样子：

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'flutter shop study',
          home: Scaffold(
            appBar: AppBar(
              title: Text('flutter shop'),
            ),
            body: Center(
              child: Text('Hello flutter shops'),
            ),
          ),
        );
      }
    }

运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]

我们简单来了解一下这个程序。dart的基础知识可以在官方阅读：[http://dart.goodev.org/][http_dart.goodev.org]

void main() => runApp(MyApp());

在dart中只有一个语句的方法可以使用缩写语法来定义方法。 特别是当把方法作为函数参数来使用的时候， 这使我们的代码变的更加简短。

class MyApp extends StatelessWidget

应用程序继承了 StatelessWidget，这将会使应用本身也成为一个 widget。在 Flutter 中，几乎所有都是 widget，包括对齐 (alignment)、填充 (padding) 和布局 (layout)。

Scaffold 是 Material 库中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。 widget 树可以很复杂。我们可以看下它的一些基本属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]

其中我们需要关注的就是build方法，一个widgets需要提供一个 build() 方法来描述如何根据其他较低级别的 widgets 来显示自己。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]: /images/20211204/39773557bfb54220ae53ffab1027f874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]: /images/20211204/f19001974f6a44898d0263e820b82511.png
[http_dart.goodev.org]: http://dart.goodev.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]: /images/20211204/db0ee16f63054a88879026a5d1acfa7c.png