首页 > 其他分享 >Flutter系列文章-Flutter基础

Flutter系列文章-Flutter基础

时间:2023-07-17 14:26:12浏览次数:33  
标签:Widget 系列 StatefulWidget Stack StatelessWidget 文章 Flutter Row

Flutter是Google推出的一种新的移动应用开发框架,允许开发者使用一套代码库同时开发Android和iOS应用。它的设计理念、框架结构、以及对Widget的使用,都让开发者能更有效率地创建高质量的应用。

一、Flutter设计理念

Flutter的设计理念是“一切皆为Widget”。这意味着不论是按钮、字体、颜色、布局,甚至是你的整个应用程序,都是由一个个Widget组合而成。在Flutter中,Widget可以嵌套、包裹或组合在一起,形成复杂的UI组件,这给了开发者极大的灵活性和创造力。

二、Flutter框架结构

Flutter框架由一系列层次结构构成。自底向上,主要包括:

  • Dart平台:Flutter使用Dart语言编写,Dart平台包括一个能够为Flutter生成原生ARM代码的Dart JIT和AOT编译器。

  • Flutter引擎:主要用C++编写,它提供了低级渲染支持。它还负责插件系统、文本布局和类型设置、网络和文件 I/O、线程管理等。

  • Foundation库:提供了和Dart一致的基本类型和实用工具,使得其他更高级别的库可以共享相同的设计和实现。

  • Widgets:描述应用程序用户界面和交互的模块。关键概念包括Widget、StatelessWidget、StatefulWidget、State等。

三、Flutter中的Widget

Flutter中的Widget即是声明UI的视图,也是视图和界面变化的桥梁。一个Widget可以定义:

一个结构元素(如按钮或菜单)
一个样式元素(如字体或颜色模式)
甚至是布局方面的元素(如填充或对齐方式)
在Flutter中,Widget的主要任务是提供一个build()方法,用于描述在UI中所看到的内容。

四、StatelessWidget和StatefulWidget

StatelessWidget是不可变的。它们描述了在给定配置下应该如何构建UI。而StatefulWidget则可以在生命周期内改变状态。实现一个StatefulWidget至少需要两个类:1)一个StatefulWidget类;2)一个State类。

五、基础布局Widgets

在Flutter中有很多布局Widget,比如Row,Column和Stack等。Row和Column是基本布局Widget,它们都接受一列子Widget,并在水平或垂直方向上排列。Stack可以将Widget堆叠在一起,实现各种复杂的布局。

六、Flutter程序结构

一个基本的Flutter程序通常包括以下部分:

  • main函数:应用的入口点。
  • MyApp类:StatelessWidget,返回一个包含应用主题、路由和主页的MaterialApp Widget。
  • 主页类:可为StatelessWidget或StatefulWidget,包含应用主体部分。
  • 其他Widget类:你自定义的Widget,可被主页类或其他Widget类使用。
    掌握了这些基础知识,你就能更好地使用Flutter框架进行应用开发,创建出精美并具有良好用户体验的应用程序。

七、Flutter的Widget

7.1. 基础Widgets

在Flutter中,所有的界面元素都是由Widget构建的。每一个Widget都描述了界面上应该看到什么。你可以把Widget看作是应用界面的一个构建块。它们包括用于显示文字、图片、图标、输入框以及行为等的元素。

7.1.1 Text:这个widget用于显示简单的样式文本,它包含一些控制文本显示样式的属性。####

Text(
  'Hello, World!',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)

7.1.2 Image:用于显示图片的widget,支持多种方式的图片加载,例如网络、资源、文件系统等。

Image.network('https://example.com/images/sample.jpg')

7.1.3 Icon:Material Design的图标widget。

Icon(Icons.star, color: Colors.red[500])

7.2. Widget类型:StatelessWidget和StatefulWidget。

7.2.1. StatelessWidget

StatelessWidget是不可变的,它描述了在给定配置下应该如何构建UI。例如,下面的代码展示了如何创建一个自定义的StatelessWidget,它返回一个红色的星星图标:

class MyIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(Icons.star, color: Colors.red[500]);
  }
}

7.2.2. StatefulWidget

StatefulWidget是动态的。它们可以在生命周期内改变状态,例如响应用户的交互。一个StatefulWidget至少需要两个类:StatefulWidget类和State类。以下是一个例子:

class Counter extends StatefulWidget {
  Counter({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _CounterState createState() => _CounterState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('You have pushed the button $_counter times.'),
        RaisedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

这个例子创建了一个名为Counter的新StatefulWidget。每当用户按下"Increment"按钮时,_counter 的值就会增加,并且UI会自动更新。

八、Flutter的基本布局Widgets

在Flutter中,我们有许多预定义的布局Widget,例如Row、Column和Stack。

8.1. Row和Column

Row和Column是两个最常用的布局Widget。它们都接受一列子Widget,并在水平或垂直方向上排列。以下是一个使用Row的例子,它包含了三个红色的星星图标:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Icon(Icons.star, color: Colors.red[500]),
    Icon(Icons.star, color: Colors.red[500]),
    Icon(Icons.star, color: Colors.red[500]),
  ],
)

8.2. Stack

Stack是一个布局Widget,它可以将子Widget堆叠在一起。你可以使用Positioned widget来定位Stack中的子Widget。以下是一个简单的Stack示例:

Stack(
  alignment: const Alignment(0.6, 0.6),
  children: [
    CircleAvatar(
      backgroundImage: AssetImage('images/pic.jpg'),
      radius: 100.0,
    ),
    Container(
      decoration: BoxDecoration(
        color: Colors.black45,
      ),
      child: Text(
        'Hello World',
        style: TextStyle(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
  ],
)

九、下面我们创建一个Flutter的示例应用,包括之前提到的一些关键概念,包括Widget,StatelessWidget,StatefulWidget,以及Row,Column和Stack布局。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title, key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: _incrementCounter,
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                ),
                FloatingActionButton(
                  onPressed: _decrementCounter,
                  tooltip: 'Decrement',
                  child: Icon(Icons.remove),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

通过这篇文章,你应该对Flutter有了一个基础的理解,包括Flutter的设计理念、框架结构、Widget系统、以及如何使用不同类型的Widgets来创建界面和布局。接下来,我们会深入到更高级的主题,包括如何处理用户交互,如何创建动画,以及如何访问网络数据等等。

标签:Widget,系列,StatefulWidget,Stack,StatelessWidget,文章,Flutter,Row
From: https://www.cnblogs.com/depeng8899/p/17559946.html

相关文章

  • Flutter | 使用 InkResponse和 InkWell组件 实现事件操作
    可以包裹不具备事件处理的组件,实现水波纹等点击事件的效果;InkWell水波纹限制在文本组件之内;InkResponse水波纹没有限制;InkResponse和InkWell都可以指定各种响应颜色、手势等相关属性;  InkWell(radius:200.0,focusColor:Colors.red,hove......
  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-8-上下文(Context)
    1.简介其实前边的文章中也提到过Context,只不过是一笔带过,但是宏哥觉得在playwright中挺重要的,所以宏哥今天单独将其拎出来讲解和分享一下,希望对您有所帮助或者参考。2.前言Playwright为每个测试创建一个浏览器上下文,即BrowserContext,浏览器上下文相当于一个全新的浏览器配置文......
  • 【NestJS系列】DI依赖注入与IOC控制反转
    前言上篇文章我们学习了如何使用nest-cli来快速生成一个NestJS后端项目,当我们打开编辑器查看代码时,会发现整个代码风格有点类似JAVA的spring框架,并且你会发现一些service类在controller控制器的constructor中注入后,可以不需要手动new就可以直接使用该类对应的实例方法。比如:imp......
  • 欧姆龙CP系列PLC以太网通讯欧姆龙cp1h以太网模块
    大家好,今天要和大家分享的是一款在工控领域中非常实用的产品——捷米特JM-ETH-CP转以太网模块。这款模块采用了即插即用的设计,不仅不会占用PLC的通讯口,而且可以通过复用接口让触摸屏与PLC进行通讯。这个设计真的非常巧妙,相信会让很多工控从业者感到非常方便。 那么,这款捷米特J......
  • ASP.NET Core SignalR 系列(四)- 中心筛选器
    本章将和大家分享ASP.NETCoreSignalR中的中心筛选器。本文大部分内容摘自微软官网:https://learn.microsoft.com/zh-cn/aspnet/core/signalr/hub-filters?view=aspnetcore-7.0废话不多说,下面我们直接进入本章主题。中心筛选器:在ASP.NETCore5.0或更高版本中可用。允许......
  • 【Sword系列】第七届全国残疾人职业技能大赛样题-网络安全-AES加密
    前言AES即高级加密标准(AdvancedEncryptionStandard),是一种对称密钥加密算法。它采用128、192和256位密钥,并且对明文进行分块加密。AES算法使用替换、置换、XOR和线性运算等基本加密算法,在加密和解密时都使用相同的密钥。AES算法主要分为四个步骤:密钥扩展、初始轮、重复轮和最终......
  • Jenkins 系列3 --- pipeline
    一、概要1.承上启下Jenkins系列2.概念Pipeline用于顺序执行应用部署所需的任务,比如Build(编译)、Test(编译)和Deploy(部署)等。Pipeline是Jenkins的核心组成部分。Pipeline定义在Jenkinsfile中,它支持两种语法定义,一种是DeclarativePipelinesyntax(声明式管道语法),另一种......
  • .NET面试题系列(23)tcp粘包问题
    序言 什么是粘包所谓粘包问题主要还是因为接收方不知道消息之间的界限,不知道一次性提取多少字节的数据所造成的。解决粘包问题的方法 资料tcp粘包问题......
  • EaselJS 源码分析系列--第二篇
    在第一篇中我们大致分析了从:创建舞台->添加显示对象->更新显示对象的源码实现这一篇将主要分析几个常用显示对象自各draw方法的实现让我们看向例子examples/Text_simple.html这个例子中使用了三个显示对象类Bitmap、Text、ShapeBitmapdraw以下例子中添加了一......
  • 触想智能五代系列工控显示产品在叉车式AGV上的应用
    近年来,随着商业配送和工业制造领域业务需求及交易体量的不断增大,传统仓储管理已不能与市场发展增速同频,效率和成本成为核心追求,各大企业开始以物流周转为切入口,对仓储运作过程进行智能化升级。在这一背景下,叉车式AGV设备应运而生,成为实现仓储智能化管理的重要工具之一。......