首页 > 其他分享 >快速写一个自己的flutter应用(新手入门)

快速写一个自己的flutter应用(新手入门)

时间:2024-09-05 08:56:41浏览次数:10  
标签:状态 Widget const StatefulWidget Flutter 新手入门 快速 flutter

1、搭建开发环境

详细文档可以参考如下链接:跟着官方文档走就可以了。

1.3 搭建Flutter开发环境 | 《Flutter实战·第二版》 (flutterchina.club)

开发 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

我的安装过程:

首先,在VS code里面,安装Dart插件

然后按住ctrl shift P,  跳出正上方的命令行, 输入flutter,新建一个应用。

这个时候vs会自动下载你所需要的flutter的sdk以及dart语言包之类的依赖,然后跟着步骤走就可以安装好了。

需要注意的是,如果中途下载失败了,大概率网络问题,那么修改镜像来源

PS:看各个文档都有说,flutter开发需要安装安卓的环境、模拟器,以及最好android studio开发,笔者自己是这几个都没搞,最后也运行Demo成功,用vs开发,在edge上模拟运行(当然这只是新手快速入门)

2、快速入门(写一个简单的页面)

参考视频如下

07.定义电影列表控件并传递电影类型_哔哩哔哩_bilibili

界面最终效果大抵如下

PS:视频是18年的,flutter有些内容毫无疑问是更新了,但是笔者目前看来是优化的更丝滑了,所以照着这个实践一下还是没有问题的。

3、一些flutter的入门知识点(还在学习补充中...)

3.1 Widget 概念    

在 Flutter 中,Widget 是用户界面(UI)的基本构建块。几乎所有的东西都是 Widget,包括布局、文本、按钮等。理解 Widget 是掌握 Flutter 的关键。

  PS:也就是说,widget更像是一个配置模块,本身不负责渲染,而是由渲染树render tree来渲染展示内容。

什么是 Widget

在 Flutter 中,Widget 是一个用于构建用户界面的不可变描述。它们描述了视图的当前配置或状态。当某些状态发生变化时,Flutter 会创建一个新的 Widget 树,并将其与旧的 Widget 树进行比较,来确定需要更新的部分。

Widget 可以分为两大类:

  1. 有状态的 Widget (StatefulWidget)
  2. 无状态的 Widget (StatelessWidget)

1. 无状态的 Widget (StatelessWidget)

无状态的 Widget 是不可变的,这意味着它们的属性不能在运行时更改。无状态的 Widget 适用于不依赖于任何状态变化的场景,比如静态文本或者简单图标。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('无状态 Widget 示例'),
        ),
        body: const Center(
          child: Text('这是一个无状态的 Widget'),
        ),
      ),
    );
  }
}

在上面的例子中,MyApp 是一个无状态的 Widget,因为它不需要在运行时更新任何状态。

2. 有状态的 Widget (StatefulWidget)

有状态的 Widget 是可变的,它们在其生命周期中可以改变状态。当用户与应用程序交互时,StatefulWidget 可以根据需要重新构建自身。

StatefulWidget 由两个类组成:

  • StatefulWidget 类:这是一个不可变类,包含 Widget 配置数据。
  • State 类:这个类是可变的,包含 Widget 的状态和逻辑。
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('有状态 Widget 示例'),
        ),
        body: Center(
          child: CounterWidget(),
        ),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '计数器的值是:$_counter',
          style: const TextStyle(fontSize: 24),
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Text('增加计数器'),
        ),
      ],
    );
  }
}

在这个例子中:

  • CounterWidget 是一个有状态的 Widget,它依赖于内部的状态变化来重新渲染。
  • _CounterWidgetState 类管理着计数器的状态 _counter
  • 当按钮被按下时,_incrementCounter 方法被调用,setState() 触发 UI 重建来反映计数器的新值。

Widget 的构建方法

Widget 的核心是 build() 方法,这个方法返回一个 Widget 树,用于描述应如何显示 Widget

标签:状态,Widget,const,StatefulWidget,Flutter,新手入门,快速,flutter
From: https://blog.csdn.net/qq_42371932/article/details/141824134

相关文章

  • Win32 C++代码快速验证模板
    DLL模板#include<windows.h>#include<algorithm>#include<array>#include<cstdio>#include<cstdlib>#include<cstring>#include<deque>#include<iostream>#include<list>#include<map>#incl......
  • 笔记-Neovim快速入门
    本文是neovim中的练习项目Tutor的笔记。建议自己手动尝试一下这个项目,很快就能上手neovim。想要尝试这个项目,只要输入:Tutor<Enter>即可。安装&启动使用包管理器apt安装即可。运行:$sudoaptinstallneovimTutorLesson1移动光标使用hjkl键可以移动光标,方向如下所......
  • Android终端如何快速接入GB28181平台实现实时音视频回传
    技术背景GB28181是由中国国家标准委员会发布的基于IP网络的安防视频监控标准。Android平台GB28181设备对接模块,主要涉及到视频监控领域,可实现不具备国标音视频能力的Android终端,通过平台注册接入到现有的GB/T28181—2016服务,可用于如执法记录仪、智能安全帽、智能监控、智慧零售、......
  • 写给懒人的Vue3快速查阅宝典 转载
    原文链接:https://juejin.cn/post/7332435905925890098作者:radawn写了多年React,但是新入职的公司技术栈是Vue,部门后续会升级到Vue3。并且发现身边不少小伙伴是React转Vue,因项目原因需要快速上手,所以输出了一篇学习笔记,方便快速上手查阅。Vue3相对于Vue2有许多改进和新功......
  • BAidu快速收录系统模板在哪里下载?泛码网SEOa3。com
    在当今数字化时代,网站优化成为了企业提升在线可见性和吸引潜在客户的关键策略。百度作为中国最大的搜索引擎,其排名机制对网站流量有着决定性的影响。而百度快收程序模板程序,作为一种网站优化工具,正逐渐受到网站管理员和SEO专家的关注。本文将探讨百度快收程序模板程序的作用、......
  • httprunner V4.3.5 安装与使用--快速上手(超详细-超长篇)
    httprunnerV4.3.5安装与使用一、Httprunner介绍1、什么是Httprunner2、HttprunnerV4版本介绍3、HttprunnerV4版本Go&Python功能对比4、Httprunner与unittest&pytest的区别二、安装1、Httprunner下载2、Hrp下载三、快速上手使用1、创建手脚架项目2、录制生成H......
  • Flutter仿京东商城项目:‌支持最新的Flutter 3.x及鸿蒙OS
    Flutter仿京东商城项目:‌支持最新的Flutter3.x及鸿蒙OS引言Flutter,‌作为谷歌公司推出的一款基于Dart语言的开源移动UI框架,‌因其跨平台、‌高性能的特点,‌迅速在移动开发领域获得广泛关注。‌随着Flutter3.x的发布,‌带来了诸多新特性和改进,‌进一步提升了开发效率和用户体验......
  • 超级快速搜索重复文件并批量删除重复文件的AutoHotkey辅助脚本 2024年9月4日
       超级快速搜索重复文件并批量删除重复文件的AutoHotkey辅助脚本 2024年9月4日   ;超级快速搜索重复文件并批量删除重复文件的AutoHotkey辅助脚本2024年9月4日/*用法:1、安装MasterSeeker1.5.1byDxCK或者安装UltraSearchProfessionalVersion4.2.0......
  • 快切云桌面助力新业务快速上线!
     不同的云桌面架构,虽然实现方式上不一样,但是在系统运维的原理上是类似的,均采用桌面模板思维。未部署云桌面时,每台电脑的操作系统需要逐台安装,逐台运维。部署云桌面之后,云桌面把传统模式下安装在电脑上的操作系统,转变为服务端的一个桌面模板,然后再把桌面模板交付给云桌面的运算单......
  • 【python编程】demo7:Python快速使用js接口
    原创python学霸在跨语言编程和Web开发中,Python和JavaScript是两种常用的编程语言。有时候,我们可能需要在Python环境中执行JavaScript代码。这就是execjs库发挥作用的地方。一、安装ExecJS在命令行中输入以下命令:pipinstallPyExecJS二、ExecJS的基本使用ExecJS支持多......