Flutter学习笔记

一、搭建环境，运行HelloWorld

这个按照flutter官网的步骤来即可

二、Demo示例熟悉

1.布局组件熟悉

Text

ListView

Center

2.通过交互改变组件状态

自定义StatefulWidget的示例熟悉

3.Android和Flutter概念类比

《给 Android 开发者的 Flutter 指南》可以通过这个快速找到对应的功能实现。

4.打包

1. 完成了Android平台APK打包

我本身已经有了Android开发环境，省略了Android开发环境的配置过程。

最终打包完成的APK路径如下图所示：

三、开始动手

1.完成一个3消游戏的逻辑设计

1.游戏基本流程图

2.UML类图

3.游戏涉及的功能点

(1)网格布局

(2)滑动手势处理

(3)平移，缩放动画

2.开始写代码

1.网格绘制

class MyGridView extends StatefulWidget {
  const MyGridView({Key? key}) : super(key: key);

  @override
  State<MyGridView> createState() => _MyGridViewState();
}

class _MyGridViewState extends State<MyGridView> {
  List<Item> items = <Item>[];

  @override
  Widget build(BuildContext context) {
    if (items.isEmpty) {
      for (var i = 0; i < 50; i++) {
        items.add(Item(Random.secure().nextInt(5)));
      }
    }

    return GridView.count(
      crossAxisCount: 10,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTitleList(items.length),
    );
  }

  List<Container> _buildGridTitleList(int count) {
    return List.generate(
        count,
        (index) => Container(
              decoration: BoxDecoration(
                color: typeColors[items[index].type],
              ),
            ));
  }
}

这里用到两个组件GridView和BoxDecoration，一个是网格布局，一个是装饰器，给每个格子上个色。
还定义了两个类：
item.dart

class Item{
  int type = 0;

  Item(this.type);
}

colors.dart

import 'package:flutter/material.dart';

const List<Color> typeColors = [
  Colors.red,
  Colors.green,
  Colors.blue,
  Colors.yellow,
  Colors.pink,
];

最终效果如下：

2.添加点击效果

// class _MyGridViewState extends State {
//   List items = [];
  int selectIndex = -1;
//
//   @override
//   Widget build(BuildContext context) {
//     if (items.isEmpty) {
//       for (var i = 0; i < 50; i++) {
//         items.add(Item(Random.secure().nextInt(5)));
//       }
//     }
//
//     return GridView.count(
//       crossAxisCount: 10,
//       padding: const EdgeInsets.all(4),
//       mainAxisSpacing: 4,
//       crossAxisSpacing: 4,
//       children: _buildGridTitleList(items.length),
//     );
//   }
//
//   List _buildGridTitleList(int count) {
//     return List.generate(
//         count,
//         (index) => Container(
//               decoration: BoxDecoration(
//                 color: typeColors[items[index].type],
//               ),
              foregroundDecoration: BoxDecoration(
                  border: Border.all(
                      color: selectIndex == index
                          ? Colors.black
                          : Colors.transparent,
                      width: 5)),
              child: GestureDetector(
                onTap: () => {
                    itemSelect(index),
                },
              )
//             ));
//   }
//
void itemSelect(int index) {
  //修改属性时使用setState包住，可以使UI监听到并自动刷新
  setState(() {
    selectIndex = index;
  });
  Toast.show(items[index].type.toString());
}
//}

增加了一个点击效果，点击后方格呈现选中状态。效果如下：

3.点击两个相邻方格，交换位置

// class _MyGridViewState extends State {
//   List items = [];
//   int selectIndex = -1;
  static const int lineCount = 10;
//
//   @override
//   Widget build(BuildContext context) {
//     if (items.isEmpty) {
//       for (var i = 0; i < 50; i++) {
//         items.add(Item(Random.secure().nextInt(5)));
//       }
//     }
//
//     return GridView.count(
//       crossAxisCount: lineCount,
//       padding: const EdgeInsets.all(4),
//       mainAxisSpacing: 4,
//       crossAxisSpacing: 4,
//       children: _buildGridTitleList(items.length),
//     );
//   }
//
//   List _buildGridTitleList(int count) {
//     return List.generate(
//         count,
//         (index) => Container(
//             decoration: BoxDecoration(
//               color: typeColors[items[index].type],
//             ),
//             foregroundDecoration: BoxDecoration(
//                 border: Border.all(
//                     color: selectIndex == index
//                         ? Colors.black
//                         : Colors.transparent,
//                     width: 5)),
//             child: GestureDetector(
              onTap: () => {
                if (selectIndex == -1)
                  {itemSelect(index)}
                else
                  {
                    if (isAdjacent(selectIndex, index))
                      {exchangeItem(selectIndex, index)}
                    else
                      {itemSelect(index)}
                  }
              },
//             )));
//   }
//

// void itemSelect(int index) {
//   //修改属性时使用setState包住，可以使UI监听到并自动刷新
//   setState(() {
//     selectIndex = index;
//   });
//   Toast.show(items[index].type.toString());
// }
///两个位置是否相邻
bool isAdjacent(int one, int two) {
  return one == (two + 1) ||
      one == (two - 1) ||
      one == (two - lineCount) ||
      one == (two + lineCount);
}

//
//   void exchangeItem(int from, int to) {
//     setState(() {
//       var temp = items[from];
//       items[from] = items[to];
//       items[to] = temp;
//       selectIndex = -1;
//     });
//   }
// }

这里新增了一个判断，前后点击的两个方格是不是相邻的，相邻就交换位置。动画那块还没开始学习，没实现动画。效果如下：