Flutter基础

Posted 怀化纱厂球迷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter基础相关的知识,希望对你有一定的参考价值。

一. 创建Flutter项目

1.1. 通过命令行创建

通过命令行创建非常简单,在终端输入以下命令即可:

  • **注意:**Flutter的名称不要包含特殊的字符,另外不可以使用驼峰标识

  • 创建完之后使用自己喜欢的开发工具打开即可

项目有两种方式:通过命令行创建 和 通过开发工具创建


flutter create learn_flutter

1.2. 通过开发工具创建

我这里也可以直接通过Android Studio来进行创建:

  • 选择Start a new Flutter project,之后填写相关的信息即可,这里不再赘述

1.3. 默认程序分析

二. 开始Flutter代码 

2.1. Hello World

import 'package:flutter/material.dart';

main(List<String> args) 
  runApp(Text("Hello World", textDirection: TextDirection.ltr));

如果要居中,文字颜色等

textDirection  传入文字方向
style  设置样式,字体颜色等
Center 也是一个Widget,实现居中操作

三、Widget介绍

Widget是所谓的组件

  • StatelessWidget: 没有状态改变的Widget,通常这种Widget仅仅是做一些展示工作而已;

  • StatefulWidget: 需要保存状态,并且可能出现状态改变的Widget;

3.1Scaffold

 是什么呢?

  • 翻译过来是脚手架,脚手架的作用就是搭建页面的基本结构;

  • 所以我们给MaterialApp的home属性传入了一个Scaffold对象,作为启动显示的Widget;

  • Scaffold也有一些属性,比如appBarbody

  • appBar是用于设计导航栏的,我们传入了一个title属性

  • body是页面的内容部分,我们传入了之前已经创建好的Center中包裹的一个Text的Widget;

主要参数有 appBar(导航栏或者Tabbar),body(界面内容)

runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
      appBar: AppBar(
          title: Text(
        "第一个项目",
        style: TextStyle(fontSize: 20, color: Colors.white),
      )),
      body: Center(
          child: Text("Hello world",
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 30, color: Colors.red))))));

3.2StatelessWidget

StatelessWidget通常是一些没有状态(State,也可以理解成data)需要维护的Widget:

  • 它们的数据通常是直接写死(放在Widget中的数据,必须被定义为final,为什么呢?我在下一个章节讲解StatefulWidget会讲到);

  • 从parent widget中传入的而且一旦传入就不可以修改;

  • 从InheritedWidget获取来使用的数据(这个放到后面会讲解);

我们来看一下创建一个StatelessWidget的格式:

build方法什么情况下被执行呢?:

  • 1、让自己创建的Widget继承自StatelessWidget;

  • 2、StatelessWidget包含一个必须重写的方法:build方法;

    
    class MyStatelessWidget extends StatelessWidget 
      @override
      Widget build(BuildContext context) 
        return <返回我们的Widget要渲染的Widget,比如一个Text Widget>;
      
    

    build方法的解析:

  • Flutter在拿到我们自己创建的StatelessWidget时,就会执行它的build方法;

  • 我们需要在build方法中告诉Flutter,我们的Widget希望渲染什么元素,比如一个Text Widget;

  • 1、当我们的StatelessWidget第一次被插入到Widget树中时(也就是第一次被创建时);

  • 2、当我们的父Widget(parent widget)发生改变时,子Widget会被重新构建;

  • 3、如果我们的Widget依赖InheritedWidget的一些数据,InheritedWidget数据发生改变时;

  • StatelessWidget没办法主动去执行build方法,当我们使用的数据发生改变时,build方法会被重新执行;

3.3StatefulWidget

有状态改变的 Widget, 通常做交互变化状态,或者页面依据 data 刷新展示

为什么 StatefullWidget 是可变的?

  • 其实无论 StatelessWidget 还是 StatefulWidget,其父类都是 Widget 因此它定义成员变量也是 final 修饰不可变~
  • 但是继承 StatefulWidget 的子类,必需要实现 State createState(); 抽像方法。
  • 所以可以变的是 State 这也是与 StatelessWidget 不一样的地方

以上是关于Flutter基础的主要内容,如果未能解决你的问题,请参考以下文章

Dart Flutter中的代码规范

Flutter基础篇——常用Widget

Flutter代码规范

JAVA基础day02

区块链基础语言——Go语言变量

JAVA基础知识