百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

Flutter——构建界面

wptr33 2024-12-05 17:00 15 浏览

Flutter构建部件其实是从React获取的灵感,其核心思想是用部件构建UI。部件描述在给定当前配置和状态的情况下,它们的视图应该是什么样子。当部件的状态发生变化时,部件将重新构建其描述,框架将其与之前的描述进行区分,以便确定从一种状态转换到下一种状态所需的并且最小更改的底层呈现树。

Hello World

import 'package:flutter/material.dart';

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

runApp()函数接受给定的Widget,并将其作为Widget树的根。在本例中,部件树由两个部件组成,Center部件及其子部件Text部件。框架强制根部件覆盖屏幕,这意味着文本“Hello, world”最终位于屏幕中央。其中textDirection指定文本显示方向。

在编写应用程序时,您通常会创建新的部件,这些小部件是StatelessWidget或statfulwidget的子类,这取决于您的部件是否管理任何状态。部件的主要工作是实现build()函数,该函数用其他较低级别的部件来描述小部件。框架依次构建这些部件,直到生成表示底层RenderObject的部件,后者计算并描述部件的几何形状。

基本部件

Flutter附带了一套功能强大的基本部件,其中以下是常用的:

Text

Text部件允许您在应用程序中创建一系列有样式的文本。

Row, Column

以上两个部件允许您在水平(Row)和垂直(Column)方向上创建灵活的布局。这些对象的设计是基于web的flex布局模型。

Stack

Stack小部件允许您按照绘制顺序将小部件放在彼此的顶部,而不是线性定向(水平或垂直)。然后,您可以在Stack的子节点上使用Positioned部件,将它们相对于Stack部件的顶部、右侧、底部或左侧边缘进行定位。Stack部件是基于web的绝对定位布局模型。

Container

Container部件允许您创建一个矩形的可视元素。容器可以使用BoxDecoration进行装饰,例如背景、边框或阴影。Container还可以对其大小设置边距、内边距和约束。此外,可以使用矩阵在三维空间中变换Container。

Material Design

Flutter提供了许多部件,可以帮助您构建Material设计的应用程序。一个Material应用程序从MaterialApp部件开始,它在应用程序的根处构建了许多有用的部件,包括一个Navigator,它管理一堆由字符串标识的小部件,也称为“路由”。Navigator允许您在应用程序的屏幕之间平滑地切换。MaterialApp部件是完全可选的,我们可以根据自己的需要选择是否使用。接下来通过一段代码来属性一下MaterialApp部件:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'Flutter Tutorial',
      home: TutorialHome(),
    ),
  );
}

class TutorialHome extends StatelessWidget {
  const TutorialHome({super.key});

  @override
  Widget build(BuildContext context) {
    // Scaffold is a layout for
    // the major Material Components.
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: const Text('Example title'),
        actions: const [
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      // body is the majority of the screen.
      body: const Center(
        child: Text('Hello, world!'),
      ),
      floatingActionButton: const FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        onPressed: null,
        child: Icon(Icons.add),
      ),
    );
  }
}

运行结果:

手势

大多数应用程序都包含与系统的某种形式的用户交互。构建交互式应用程序的第一步是检测输入手势。接下来通过创建一个简单的按钮,来了解它是如何工作的:

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('MyButton was tapped!');
      },
      child: Container(
        height: 50,
        padding: const EdgeInsets.all(8),
        margin: const EdgeInsets.symmetric(horizontal: 8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: Colors.lightGreen[500],
        ),
        child: const Center(
          child: Text('Engage'),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyButton(),
        ),
      ),
    ),
  );
}

GestureDetector部件没有视觉表示,而是检测用户做出的手势。当用户点击Container时,GestureDetector调用它的onTap()回调函数,在本例中向控制台打印一条消息。您可以使用GestureDetector来检测各种输入手势,包括点击、拖动和缩放。

许多部件使用手势检测器为其他小部件提供可选的回调。例如,IconButton、ElevatedButton和FloatingActionButton小部件都有onPressed()回调函数,当用户点击部件时触发。

状态

到目前为止,页面都只使用了无状态部件。无状态部件从它们的父部件接收参数,这些参数存储在final成员变量中。当一个部件被请求build()时,它使用这些存储的值为它创建的部件派生新的参数。

为了构建更复杂的体验——例如,以更有趣的方式对用户输入做出反应——应用程序通常会携带一些状态。Flutter使用StatefulWidgets来捕捉这个State。StatefulWidgets是一种特殊的部件,它知道如何生成State对象,然后使用State对象来保存状态。考虑这个基本的例子,使用前面提到的ElevatedButton:

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
        const SizedBox(width: 16),
        Text('Count: $_counter'),
      ],
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Counter(),
        ),
      ),
    ),
  );
}

上面的示例接受用户输入,并在build()方法中直接使用结果,每次点击按钮,Count中的值就会递增。

生命周期

Flutter 中的生命周期,包含以下几个阶段:

  • createState 该函数为 StatefulWidget 中创建 State 的方法,当 StatefulWidget 被调用时会立即执行 createState 。
  • initState该函数为State初始化调用,因此可以在此期间执行 State 各变量的初始赋值,同时也可以在此期间与服务端交互,获取服务端数据后调用 setState 来设置 State。
  • didChangeDependencies 当State对象的依赖发生变化时会被调用;例如:在build() 中包含了一个InheritedWidget,然后在之后的build() 中InheritedWidget发生了变化,那么此时InheritedWidget的子widget的didChangeDependencies()回调都会被调用。典型的场景是当系统语言Locale或应用主题改变时,Flutter framework会通知widget调用此回调。
  • build 主要是返回需要渲染的 Widget ,由于 build 会被调用多次,因此在该函数中只能做返回 Widget 相关逻辑,避免因为执行多次导致状态异常。在 build 之后还有个回调 addPostFrameCallback,在当前帧绘制完成后会回调,注册之后不能被解注册并且只会回调一次;addPostFrameCallback是 SchedulerBinding 的方法;由于 mixin WidgetsBinding on SchedulerBinding,所以添加这个回调有两种方式:SchedulerBinding.instance.addPostFrameCallback((_) => {});或者WidgetsBinding.instance.addPostFrameCallback((_) => {});
  • reassemble在 debug 模式下,每次热重载都会调用该函数,因此在 debug 阶段可以在此期间增加一些 debug 代码,来检查代码问题。
  • didUpdateWidget 在widget重新构建时,Flutter framework会调用Widget.canUpdate来检测Widget树中同一位置的新旧节点,然后决定是否需要更新,如果Widget.canUpdate返回true则会调用此回调。正如之前所述,Widget.canUpdate会在新旧widget的key和runtimeType同时相等时会返回true,也就是说在在新旧widget的key和runtimeType同时相等时didUpdateWidget()就会被调用。父组件发生 build 的情况下,子组件该方法才会被调用,其次该方法调用之后一定会再调用本组件中的 build 方法。
  • deactivate 在组件被移除节点后会被调用,如果该组件被移除节点,然后未被插入到其他节点时,则会继续调用 dispose 永久移除。
  • dispose 永久移除组件,并释放组件资源。

Flutter 生命周期的整个过程可以分为四个阶段:

  1. 初始化阶段:createState 和 initState
  2. 组件创建阶段:didChangeDependencies 和 build
  3. 触发组件 build:didChangeDependencies、setState 或者didUpdateWidget 都会引发的组件重新 build
  4. 组件销毁阶段:deactivate 和 dispose

Keys

在部件重建时,使用Keys来控制框架将哪些部件与其他部件匹配。默认情况下,框架根据它们的运行时间类型和它们出现的顺序来匹配当前和以前构建中的部件。对于Keys,框架要求两个部件具有相同的key和相同的runtimeType

当我们修改一组保持某种状态的相同类型的部件时,通常会使用Keys。大多数情况下,我们将它们应用于数据不断变化的部件子部件,如Listview或Stateful部件。

Flutter在重新呈现前检查前一个小部件的状态,如果前一个小部件与新小部件的类型相同,它将保持旧状态。如果数据发生变化,我们不希望出现引用旧数据这种情况。因此,我们需要Keys来唯一地标识部件。这是因为新的部件将具有与前一个不同的密钥,因此旧的部件将被销毁。

Global keys

全局键可以用于从部件树的任何位置访问另一个部件的状态,但是它的成本很高,同时可能在代码的不同部分引入一些耦合,而且有更好的方法可以做到这一点,比如Providers, Inherited Widgets等。

GlobalKey通常与GlobalKey<FormState>一起使用。例如,当处理表单时,它允许您访问表单的状态并执行诸如表单验证和提交之类的操作。

相关推荐

搭建Oracle数据库服务器(oracle数据库服务器安装教程)

【十一】搭建Oracle数据库服务器...

Oracle 删除大量表记录操作总结(oracle删除表记录数据)

删除表数据操作清空所有表记录TRUNCATETABLEyour_table_name;...

专访搜狗DBA负责人王林平:为何从Oracle转向MySQL?

王林平CSDN:首先,请做个自我介绍,目前所负责的领域以及所在公司。王林平:大家好,我是王林平,目前在搜狗商业平台研发部工作。主要负责商业广告数据库的维护、优化、架构设计、流程体系建设、自动化运维平台...

Oracle数据库知识 day01 Oracle介绍和增删改查

一、oracle介绍ORACLE数据库系统是美国ORACLE公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器(CLIENT/SERVER)或B/S体系结构...

深入探索Oracle 回表原理、影响与优化技巧

什么是回表当对一个列创建索引之后,索引会包含该列的键值以及键值对应行所在的rowid。通过索引中记录的rowid访问表中的数据就叫回表。执行计划中的TABLEACCESSBYINDEXROW...

那些年我们踩过的语句创建oracle 12c cdb实例的坑

现在大多数客户使用oracle还是11g版本的,很多小伙伴可能还没接触过12c,所以今天小编要为大家科普下12c版本的oracle的安装过程中会出现的错误。前面步骤其实都是一样的,我们就直接从建好1...

Oracle高级数据库特性揭秘:存储过程、触发器与权限管理

当谈论Oracle高级数据库特性时,存储过程和函数、触发器、权限管理和安全性以及数据库连接和远程访问是关键概念。下面我将为每个主题提供详细的解释,并附上高质量示例。...

ORACLE内核解密之表空间管理(oracle表空间大小是由什么决定)

一、ORACLE表空间管理1、本地表空间管理tablespace(LMT)...

Oracle 创建磁盘组报错ORA-15137的问题分析与解决思路

ASM扩容本来是件很简单的事,当ASM磁盘准备好之后,直接一条命令就会添加上。但是也会有异常情况,最近就碰到Oracle19c在扩容时报错的故障,供大家参考。...

DBA日记之Oracle数据库索引一(oracle数据库索引有哪几种)

什么是索引在oracle数据库中,索引是数据库中一种可选的数据结构,通常与表或簇相关。用户可以在表的一列或数列上建立索引,以提高在此表上执行SQL语句的性能。就像本文档的索引可以帮助读者快速定位所...

利用Oracle触发器实现不同数据库之间的数据同步

首先在两个数据库之间创建链接(DBLink),然后对要同步地表做一个同义(synonym),最后建一个触发器实现同步。实现步骤如下:1)为保证连接到另一台远程服务器的数据库,需要建立一个DBLin...

oracle已有表的分表分区优化操作步骤(单表过大)

第一章、步骤总览0、获取创建表空间DDL、创建表空间(该步骤在将分区放入不同的表空间时采用)...

Oracle 表分区在线重定义(oracle表分区后查询语句改变吗)

表分区有以下优点:a、改善查询性能:对分区对象的查询可以仅搜索自己关心的分区,提高检索速度。b、增强可用性:如果表的某个分区出现故障,表在其他分区的数据仍然可用;c、维护方便:如果表的某个分区出现故障...

ORACLE 体系 - 14(oracle 11g的体系结构有几种)

【十四】数据移动...

Oracle-架构、原理、进程(oracle进程结构)

详解:首先看张图:对于一个数据库系统来说,假设这个系统没有运行,我们所能看到的和这个数据库相关的无非就是几个基于操作系统的物理文件,这是从静态的角度来看,如果从动态的角度来看呢,也就是说这个数据库系统...