flutter入门笔记

1.前言

• flutter是谷歌内部项目开发出来了一个跨平台UI框架，他有着极强的场景化定制风格，不是一个通用型的UI框架，换句话说，你学的不是做通用界面，而是学习做标准的App模板
• 万物即Widget，所有的界面元素都是通过一个个Widget拼凑嵌套而来，你要知道的就是他的设计思路，以及常见的Widget有哪些，以及他们的基本用法
• Widget组件的参数值，flutter倾向于使用枚举值，除非是某个类型的值无法枚举（字符串，数值等）
• 你的目标是学习flutter，先从web端开始学习flutter的相关知识，至于安卓的全家桶可以先忽略，避免因为环境搭建失败导致学习中断

2.布局组件

• Row和Column：他们属于多子组件容器，负责整体的布局，Row和Column相当于div的flex布局，一个横向一个纵向，且设计思路一致，都有主轴和副轴的概念，也有不同轴的方向上对其方式的概念
• Container：他是单子组件的容器，提供padding,margin等参数对真实展示内容的组件进行包裹
• Expanded：扩展组件，严格的说不是扩展，而是按比例分配空间的组件，配合Row和Column使用，由flex参数值绝对分配多少比例的空间，默认为1，如果设置为0，则这个组件的空间由他的子组件撑开

3.其他组件

• Center：水平垂直都居中的组件，会占满父容器

4.按钮

• ElevatedButton：常规按钮，通过onPressed设定点击事件，其print方法相当于web端的console.log
• TextButton：文字按钮
• InkWell：给它包裹的子组件 “附加点击交互能力” 的组件，可以利用它做自定义按钮

5.动态渲染

• 有状态 (Stateful) Widget ，当数据变动时，会自动刷新对应的UI页面节点

//1.创建一个继承StatefulWidget的子类
class CounterWidget extends StatefulWidget {
  @override
  //2.重写createState，定义返回值类型，并且返回一个同名State类
  State<CounterWidget> createState() => _CounterWidgetState();
}

//3.创建步骤2中要返回的类，并且继承createState的返回类型
class _CounterWidgetState extends State<CounterWidget> {
  //4.定义响应式数据
  int _counter = 0;
  //5.定义更新数据的方法
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  //6.重写build，出差渲染内容
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        //按钮
        ElevatedButton(
          //按钮展示的内容（响应式更新）
          child: Text('$_counter'),
          //点击事件，调用更新数据的方法
          onPressed: () => {_incrementCounter()},
        ),
      ],
    );
  }
}

6.配置 Gradle 镜像

• 修改项目级 build.gradle（项目根目录下的 android/build.gradle.kts）,替换为阿里云镜像，解决Gradle 下载慢的问题

allprojects {
    repositories {
        maven { 
            url = uri("https://maven.aliyun.com/mvn/view") 
            content { // 替代旧的 mavenContent
                includeGroupByRegex(".*")
            }
        }

        google()
        mavenCentral()
    }
}

7.常用安卓配置

• 安卓App名称：定位到 android/app/src/main/AndroidManifest.xml

<application
    android:name="${applicationName}"
    android:label="你的App名称"  <!-- 这里设置App名称 -->
    android:icon="@mipmap/ic_launcher">
    <!-- 其他配置 -->
</application>

• 添加网络权限声明：定位到 android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 在这里添加网络权限 -->
    <uses-permission android:name="android.permission.INTERNET" />
    
    <application
        android:name="${applicationName}"
        android:label="你的App名称"
        android:icon="@mipmap/ic_launcher">
        <!-- 应用组件配置 -->
    </application>
</manifest>

8.配置App图标

• 在 Flutter 中设置 App 图标标并自动生成不同尺寸的图标，可以使用 flutter_launcher_icons 插件，它能自动为 Android 和 iOS 生成各种所需尺寸的图标
• 安装命令行：

flutter pub add flutter_launcher_icons --dev

• 配置图标：在 pubspec.yaml 中添加图标配置（通常放在flutter:节点前面）

# 关键：将flutter_icons放在这里，与flutter节点同级
flutter_icons:
  ios: true
  android: true
  image_path: "assets/icon/logo.png"  # 确保该路径下有图标文件

flutter:
  uses-material-design: true

• 生成图标

flutter pub run flutter_launcher_icons