Flutter 流式布局点击添加图片

main

import 'package:flutter/material.dart';
import 'warp_demo.dart';
main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: WarpDemo(),
    );
  }
}

WarpDemo()

import 'package:flutter/material.dart';

// 使用动态Widget
class WarpDemo extends StatefulWidget {
  WarpDemo({Key key}) : super(key: key);

  _WarpDemoState createState() => _WarpDemoState();
}

class _WarpDemoState extends State<WarpDemo> {

  List<Widget> list;
  // 初始化list
  @override
  void initState() {
    list = List<Widget>()..add(buildAddButton());
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    // 得到屏幕的宽高
    final Width = MediaQuery.of(context).size.width;
    final Height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(title: Text('Warp流式布局'),),
      body: Center(
        // 设置透明度
        child: Opacity(
          opacity: 0.8,
          child: Container(
            width: Width,
            height: Height / 2,
            color: Colors.grey,
            
            child: Wrap(
              children: list,
              // 设置间距
              spacing: 26.0,
            ),
          ),
        ),
      ),
    );
  }

  
  Widget buildAddButton(){
    // 手势识别的组件
    return GestureDetector(
      onTap: (){
        // 如果list 的长度小于9长度就添加照片
        if(list.length < 9){
          // 更新界面
          setState(() {
            list.insert(list.length-1,buildPhoto());
          });
        }
      },
      child: Padding(
        // 添加照片的组件
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: 90,
          height: 90,
          color: Colors.black54,
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  // 显示照片的组件
  Widget buildPhoto(){
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 90,
        height: 90,
        color: Colors.yellow,
        child: Center(
          child: Text('照片'),
        ),
      ),
    );
  }
}