20个Flutter实例视频教程-第12节: 流式布局 模拟添加照片效果

视频地址；

https://www.bilibili.com/video/av39709290/?p=12

博客地址：

https://jspang.com/post/flutterDemo.html#toc-b97

 

要实现的效果;

 

这里主要是用我们的流式布局

顺序排，一般到头了 会顺序往下排列。

还会学到 媒体查询、手势操作

先写main.dart

 

创建warp_demo.dart

这个组件肯定是动态的。

 那些加号都是数组生成的，所以这里声明一个数组。数组里面添加按钮，添加按钮我们需要单独写一个方法

我们的Container是没有手势识别的。如果想让它具有手势识别，就要外层给他加一个GestureDetector手势识别

相当于我们 html里面的div我们要向让它点击挑战链接的话，就在外层加一个a标签。

点击的时候触发的事件：我们现在还没有这个buildPhoto方法

 

 

 

 

 

创建黄色的正方形的组件buildPhoto方法

buildPhoto也返回一个widget

 

开始洗build

 

 

 

代码修正，

因为是一个动态的组件，所以要修改里面的list的状态的时候 必须使用setState方法

 

效果展示：

每次点击加好左侧就会加一个照片的黄色正方形。

 

 

代码：

import 'package:flutter/material.dart';
import 'warp_demo.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),//轻量级的皮肤
      home: WarpDemo()
    );
  }
}

main.dart