Flutter学习笔记

1. 创建项目

复制代码

flutter create --platforms web flutter_demo

注意如果执行命令后什么都不显示，可能是权限不足，使用管理员身份运行PowerShell

看到All done!即可创建成功

2. 运行项目

复制代码

cd flutter_demo
flutter run -d chrome

进入项目根目录,运行 Web 项目（指定 Chrome 浏览器）

如果遇到该情况（启动失败，打开浏览器，但浏览器显示不出结果），可能是Flutter 启动 Chrome 时的参数组合和浏览器权限冲突。

解决：

用「web-server」模式绕开浏览器启动（最快速验证）

先不通过 Flutter 直接启动浏览器，改用「web 服务器」模式，手动在 Chrome 中打开页面：

复制代码

# 启动 web 服务器（不自动打开浏览器）
flutter run -d web-server

注意如果执行命令后什么都不显示，可能是权限不足，使用管理员身份运行PowerShell

启动成功后，会输出类似http://localhost:62825 的地址，手动复制这个地址到 Chrome 中打开即可访问项目。

3. 组件学习

3.1基础组件

3.1.1 MaterialAPP

整个应用被MaterialApp包裹，方便对整个应用的属性进行整体设计

复制代码

void main(List<String> args) {
  runApp(
    MaterialApp(
      title: "materialAPP 体验",//展示标题
      theme: ThemeData(scaffoldBackgroundColor: Colors.blueAccent),//设置主题
      home: Scaffold(),//展示主体内容， Scaffold()骨架组件
    ),
  );
}

注意如果修改代码后浏览器页面还没有变化，终端输入r实现热重载，再刷新浏览器即可得到修改后的页面展示。

3.1.2 Scaffold

代码展示：

复制代码

runApp(
    MaterialApp(
      title: "materialAPP 体验",
      theme: ThemeData(
        //设置中部与底部主题
        scaffoldBackgroundColor: const Color.fromARGB(255, 127, 147, 183),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("头部区域"), centerTitle: true),

        body: Container(child: Center(child: Text("中部区域"))),

        bottomNavigationBar: Container(
          height: 80, //设置底部大小，不然中部与底部无法分开，看不到底部效果
          child: Center(child: Text("底部区域")),
        ),
      ),
    ),
  );

效果展示：

3.2 自定义组件

3.2.1无状态组件

无状态组件：创建新的类，继承 StatelessWidget 并实现build方法，build返回Widget

纯展示型组件，没有用户交互操作

复制代码

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "materialAPP 体验",
      theme: ThemeData(
        //设置中部与底部主题
        scaffoldBackgroundColor: const Color.fromARGB(255, 127, 147, 183),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("头部区域"), centerTitle: true),

        body: Container(child: Center(child: Text("中部区域"))),

        bottomNavigationBar: Container(
          height: 80, //设置底部大小，不然中部与底部无法分开，看不到底部效果
          child: Center(child: Text("底部区域")),
        ),
      ),
    );
  }
}

3.2.2有状态组件

有状态组件管理变化的内部状态，当状态改变时，组件回更新显示内容

第一个类负责向外接收参数，第二个类向内管理状态

复制代码

import 'package:flutter/material.dart';

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

//第一个类，创建State对象（接收外部参数）
class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    //返回第二个类的对象
    return _MainPageState();
  }
}

//第二个类 内部类（私有）继承State<第一个类名>，负责管理数据 处理业务逻辑 渲染视图
class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "materialAPP 体验",
      theme: ThemeData(
        //设置中部与底部主题
        scaffoldBackgroundColor: const Color.fromARGB(255, 4, 85, 238),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("头部区域"), centerTitle: true),

        body: Container(child: Center(child: Text("中部区域"))),

        bottomNavigationBar: Container(
          height: 80, //设置底部大小，不然中部与底部无法分开，看不到底部效果
          child: Center(child: Text("底部区域")),
        ),
      ),
    );
  }
}

3.3 组件生命周期

3.3.1 无状态组件

唯一阶段：build()方法

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

3.3.2 有状态组件

InheritedWidget：全局状态（如路由），专门用于Widget树中自顶向下高效地共享数据，顶层组件提供数据，子孙节点直接获取

所有方法均在第二个类中实现（如AState）

3.4 点击事件

3.4.1 GestureDelector

GestureDelector是Flutter中最常用、功能最丰富的手势检测组件

onTap：点击 onDoubleTap：双击等以on开头的方法

用法：GestureDelector包裹被点击的元素，传入方法（以on开头）

复制代码

body: Container(
          child: Center(
            child: GestureDetector(//包裹
              // onTap: () { //点击事件
              //   print("点击了该区域");
              // },
              onDoubleTap: () {
                print("双击该区域");
              },
              child: Text("中部区域"),//被点击的元素
            ),
          ),
        ),

3.4.2 组件点击事件

复制代码

 body: Container(
          child: Center(
            child: TextButton(
              onPressed: () {
                //处理点击逻辑
                print("组件点击");
              },
              child: Text("文本按钮"),
            ),
          ),
        ),

3.5 状态更新

数据的变化要更新UI视图，需要执行setState方法，setState方法会造成build的重新执行

复制代码

body: Center(
          child: Row(
            children: [
              TextButton(
                onPressed: () {
                  setState(() {
                    //如不加setState，则页面上count的值永远为1（UI不更新）
                    count--;
                  });
                },
                child: Text("-"),
              ),
              Text(count.toString()),
              TextButton(
                onPressed: () {
                  count++;
                  setState(() {}); //也可以这样写，setState是异步操作，最后执行
                },
                child: Text("+"),
              ),
            ],
          ),
        ),

3.6 组件

布局组件

3.6.1 Container组件

相当于HTML的div

常见属性

复制代码

return MaterialApp(
      home: Scaffold(
        body: Container(
          transform: Matrix4.rotationZ(0.05),//变换角度0.05是弧度而非角度,
          margin: EdgeInsets.all(20),//外边距
          alignment: Alignment.center,//子组件居中
          width: 200,//宽  width:double.infinity正无穷大，填满整个空间宽
          height: 200,//高
          decoration: BoxDecoration(
            color: Colors.blue,//背景颜色
            borderRadius: BorderRadius.circular(15),//圆角
            border: Border.all(width: 3,color: Colors.yellow)//边框
          ),
          child: Text(//Text内置样式
            "hello world ",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          //color:Colors.blue 简单的背景与颜色
        ),
      ),
    );

width:double.infinity正无穷大，填满整个空间宽