Flutter第七节-----快捷键创建组件与flutter中的点击事件

一.快速创建组件

实例1--无状态组件：

实例2-----有状态组件：

二.组件的生命周期

1.无状态组件

2.有状态组件

三.Flutter中的点击事件GestureDetector

1.纯文本式

2.按钮式的

一.快速创建组件

●无状态组件快捷键：statelessW

●有状态组件快捷键：statefulw

实例1--无状态组件：

注意这里报错是没有引入material.dart鼠标在爆粗的函数上停留会有一个快速修复就行。

Dart 复制代码

 //无状态组件
class Testwidget extends StatelessWidget {
  const Testwidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: null,
    );
  }
}

实例2-----有状态组件：

Dart 复制代码

//有状态组件
class Testwidgets extends StatefulWidget {
  Testwidgets({Key? key}) : super(key: key);

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

class _TestwidgetsState extends State<Testwidgets> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: null,
    );
  }
}

和我们前面写的稍微有点出入，大部分只是写法不同，不懂的语法自己查一下。

二.组件的生命周期

1.无状态组件

其唯一阶段是build的时候：当组件被创建或父组件状态变化导致其需要重新构建时，buld方法会被调用

2.有状态组件

总结

●无状态组件-build

●有状态组件（创建阶段）：createState->initState->didChangeDependencies->build

●有状态组件（更新阶段）：didUpdatewidget->build

●有状态组件（销毁阶段）：deactivate->dispose

●执行一次函数：createState、initState、dispose

●InheritedWidget::专门用于在Widget树中自顶向下高效地共享数据，顶层组件提供数据，子孙节点直接获取

三.Flutter中的点击事件GestureDetector

1.纯文本式

●事件：用户与应用程序交互时触发的各种动作，比如触摸屏幕、滑动、点击等

●点击事件：当点击某个元素触发的动作

●常规方案：Gesture Detector是Flutter中最常用、功能最丰富的手势检测组件

Dart 复制代码

import 'dart:developer';

import 'package:flutter/material.dart';

class name extends StatelessWidget {
  const name({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "标题",
      home: Scaffold(
        appBar: AppBar(title: Text("头部区域"), centerTitle: true),
        body: Container(
          child: Center(
            child: GestureDetector(
              child: Text("中部区域"),
              onTap: () {
                print("点击了该区域！");
              },
            ),
          ),
        ),
        bottomNavigationBar: Container(
          child: Center(child: Text("底部导航栏")),
          height: 80,
        ),
      ),
    );
  }
}

void main(List<String> args) {
  runApp(name());
}

当点击中部区域的时候控制台会打印点击了该区域。

2.按钮式的

Dart 复制代码

child: Center(
            child: TextButton(
              onPressed: () {
                print('按钮的点击事件');
              },
              child: Text("中部区域"),
            ),
          ),