flutter 流式布局wrap实现类似点击添加照片的功能

setState(){
	可以直接写操作,而不一定全是赋值
}

代码示例:

import 'package:flutter/gestures.dart';
import "package:flutter/material.dart";
import 'package:flutter/rendering.dart';
import "drag.dart";
import 'dart:ui';

import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';
import 'xuan.dart';

void main()
{
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return App2();
  }
}

class App2 extends StatefulWidget {
  App2({Key key}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App2> with SingleTickerProviderStateMixin {

  // List _page=[Home3(),Home2(),Home4()];
  // int index=0;
  TabController con;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    con=new TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    con.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title: Text('小案例'),
        ),
        
        body:Home(),
        // floatingActionButton: FloatingActionButton(
        //   onPressed: (){},
        //   tooltip: 'js',
        //   child: Icon(
        //     Icons.add,
        //     color: Colors.white,
        //   ),
        // ),
        // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        // //导航栏
        // bottomNavigationBar:BottomAppBar(
        //   color: Colors.lightBlue,
        //   //有缺口的圆形矩阵,用来放置浮动按钮
        //   shape: CircularNotchedRectangle(),
        //   child: Row(
        //     mainAxisAlignment:MainAxisAlignment.spaceEvenly,
        //     children: <Widget>[
        //       IconButton(
        //         icon:Icon(Icons.home),
        //         color: Colors.white,
        //         onPressed: (){},
        //       ),
        //       IconButton(
        //         icon:Icon(Icons.category),
        //         color: Colors.white,
        //         onPressed: (){},
        //       ),
        //   ],),
        // )
      ),
      // routes: {
      //   '/test':(context)=>Home4()
      // },
      
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      );
  }
}


class Home extends StatefulWidget {

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  

  List<Widget> list;
 void initState()
 {
   list=[GestureDetector(
             onTap: (){
               setState(() {
                 list.insert(list.length-1, Container(margin:EdgeInsets.all(10),height: 100,width: 100,color: Colors.red,));    
               });
             
             },
             child: Container(
               height: 100,
               width: 100,
               color: Colors.yellow,
             ),
    )];
 }

  @override
  Widget build(BuildContext context) {
    return Container(
      // width: double.infinity,
       child:Wrap(
         children:list,
       )
       
    );
  }
}