flutter 基础组件学习

文章目录

[flutter 项目结构](#flutter 项目结构)
[runapp 和 widget](#runapp 和 widget)
[基础组件--material App](#基础组件--material App)
[基础组件- scaffold](#基础组件- scaffold)
自定义组件
无状态组件
有状态组件
[快捷键快速创建无状态组件和有状态组件](#快捷键快速创建无状态组件和有状态组件)
生命周期-无状态组件
[生命周期- 有状态组件](#生命周期- 有状态组件)
点击事件-GestureDetector
事件-组件点击事件
状态更新-setState

flutter 项目结构

当我们创建项目的时候，flutter自动帮我们创建一些东西。

我们重点只需要关注两个

第一个是lib，项目的主要源代码目录

第二个是pubspec.yml ,也就是项目依赖和配置文件(类比python的requestments.txt go 语言的go.mod)

其他的，如果上过班的话，应该也清楚是什么，这里就简单说一下

build 是存放构建产物的目录，比如exe，就是编译过后可运行的文件

test 就是存放代码测试的目录，一般是公司要求编写单测

.gitignore 学过git 的应该都知道吧，要求git 在add 的时候，忽略的文件或目录

runapp 函数是 flutter 内部提供的一个函数，我个人理解是程序的启动入口

flutter 中万物皆widget

什么都是widget

基础组件--material App

material 是官方出的UI 库，整个 app 都被 material app 包裹

本节我们学到了三个常用属性

title：用来设置网页的名称

theme: ThemeData(scaffoldBackgroundColor: Colors.pinkAccent),

用来设置主题的颜色，需要注意，如果home 没有设置的话，这个颜色是不会显示出来的

home 就是用来展示窗口的主体内容的。

dart 复制代码

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter 组建初体验",
    theme: ThemeData(scaffoldBackgroundColor: Colors.pinkAccent),
    home: Scaffold(
      body: const Center(
        child: Text("Hello World!"),
      ),
    ),
  ));
}

基础组件- scaffold

scaffold 是页面骨架，常用的就是三个widget

分别是 appBar，body，bottomNavigationBar

appBar 就是页面的头部区域，这部分我们可以AppBar 来进行设置

body 就是身体，也就是页面的中部区域，我们这里使用containter 容器，后面会进行讲解

bottimNavigationBar 就是页面的底部

本节还讲了

Centor ，用于让组件处于居中的位置

Text，文本组件

height,设置容器高度

需要注意，bottomNavigationBar 需要设置一下高度，不然会被body 给挤掉。

还有就是，使用win 的话，会发现头部区域的文字是右对齐的，这个应该是win和mac平台不同造成的。

dart 复制代码

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "flutter 初体验",
    // theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
    home: Scaffold(
      appBar: AppBar(
        title: Text("头部区域"),
      ),
      body: Center(
        child: Text("中部区域"),
      ),
      bottomNavigationBar: SizedBox(
        height: 80,
        child: Center(
          child: Text("底部区域"),
        ),
      ),
    ),
  ));
}

自定义组件

自定义组件分为有状态组件和有状态组件，区别如下

无状态组件

无状态组件简单来说就是不能动的，纯展示型组件，没有用户交互操作

自己实现一个无状态组件，也是挺简单的

只需要 创建一个新的类，继承Statelesswidget 类并实现build 方法

dart 复制代码

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 初体验",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: Text("中部区域"),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
}

有状态组件

有状态组件跟无状态组件，我觉得最大的区别在于，有一个类负责管理所有可变的数据和业务逻辑，其他跟无状态组件，感觉区别不是很大。

dart 复制代码

import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }

}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 有状态组件",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: Text("中部区域"),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
  }

快捷键快速创建无状态组件和有状态组件

idea 的快捷键，跟vscode 里面的快捷键，有一点不同，

无状态组件快捷键：stless

有状态组件快捷键：stful

下面这个是vscode 的快捷键

生命周期-无状态组件

无状态组件的唯一阶段就是 build 方法

当组件被创建或父组件状态变化 导致其需要重新构建时，build方法 会被调用

生命周期- 有状态组件

可以跑一下代码试一下，

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(TestWidget());


}

class TestWidget extends StatefulWidget {
  const TestWidget({super.key});

  @override
  State<TestWidget> createState() {
    print("create state 阶段");
    return _TestWidgetState();
  }

}

class _TestWidgetState extends State<TestWidget> {
  @override
  void initState() {
    print("init state 阶段");
    // TODO: implement initState
    super.initState();
  }
  @override
  void didChangeDependencies() {
    print("didChangeDependencies 阶段");
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    print("deactivate 阶段");
    super.deactivate();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    print("dispose 阶段");
    super.dispose();
  }


  @override
  void didUpdateWidget(covariant TestWidget oldWidget) {
    // TODO: implement didUpdateWidget
    print("didUpdateWidget 阶段");
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    print("build 阶段");
    return const Placeholder();
  }
}

点击事件-GestureDetector

GestureDetector 是手势检测组件

可以使用该组件的 onTap 方法来实现单击事件的触发，onDoubleTap 就是双击事件，可以试一下下面的代码

dart 复制代码

import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }

}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 有状态组件",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: GestureDetector(
              // onTap: (){
              //   print("点击了该区域");
              // },
              onDoubleTap: (){
                print("双击了该区域");
              },
              child: Text("中部区域"),
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
}

事件-组件点击事件

flutter 还提供其他的组件，来进行点击交互

dart 复制代码

import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }

}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 有状态组件",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: TextButton(onPressed: (){
              print("点击了该区域");
            }, child: Text("按钮"))
            ),
          ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
}

状态更新-setState

当数据变化，需要更新ui视图的时候，需要执行setState 方法，setState 造成build 方法的重新执行。

flutter 基础组件学习

文章目录

flutter 项目结构

runapp 和 widget

基础组件--material App

基础组件- scaffold

自定义组件

无状态组件

有状态组件

快捷键快速创建 无状态组件 和 有状态组件

生命周期-无状态组件

生命周期- 有状态组件

点击事件-GestureDetector

事件-组件点击事件

状态更新-setState

快捷键快速创建无状态组件和有状态组件