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

喜欢ヅ旅行 2021-07-24 23:30 384阅读 0赞

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,
           )
           
        );
      }
    }