flutter widgets简介

最新推荐文章于 2024-07-26 18:15:24 发布

rainynights

最新推荐文章于 2024-07-26 18:15:24 发布

阅读量620

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/qingyulove/article/details/96380756

版权

flutter 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

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

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'),
        ),
      ),
    );
  }
}

运行效果：
在这里插入图片描述