flutter的布局样式 笔记

flutter插件网站	
https://pub.dev/packages/flutter_swiper
各种插件
	   install_plugin 2.0.0#app下载更新插件
  audio_recorder: any #录音、播放
  flutter_sound: ^1.1.5#录音
  dropdown_menu: ^1.1.0#下拉菜单
  simple_permissions:#权限获取
  easy_alert:#弹框
  amap_location: any #高德地图
  location: any #gogle位置获取
  barcode_scan 0.0.8#二维码识别qr_mobile_vision: ^0.1.0 #二维码识别 这个不好用
  flutter_screenutil: ^0.3.0#屏幕适配工具类  
  flutter_spinkit: ^2.1.0#加载等待框
  lpinyin: ^1.0.6#汉字转拼音
  shimmer: ^0.0.4#微光效果控件
  qr_flutter: ^1.1.3#二维码生成
  url_launcher: any#启动URL的Flutter插件。支持网络，电话，短信和电子邮件
  datetime_picker_formfield: ^0.1.3#时间选择控件
  flutter_picker: '^1.0.0'#选择器
  common_utils: '^1.0.1'#工具类 时间、日期、日志等
  flutter_html: '^0.8.2'#静态html标记呈现为Flutter小部件
  fluwx: '^0.3.0'#微信支付、分享、登录
  tobias: '^ 0.0.6#支付宝
  cupertino_icons: '^0.1.2'#小图标控件
  http: '^0.11.3+16'#网络请求
  html: '^0.13.3'#html解析
  image_picker: '^0.4.5'#图片选择（相册或拍照）
  flutter_webview_plugin: any#webview展示
  fluttertoast: any#toast提示框
  shared_preferences: '^0.4.2'#shared_preferences存储
  transparent_image: '^0.1.0'#透明图片控件
  flutter_swiper : '^1.0.2'#轮播图
  charts_flutter: '^0.4.0'#统计图表
  path_provider: '^0.4.1'#获取系统文件
  cached_network_image: '0.4.1'#加载网络图片并本地缓存
  sqflite: '^0.11.0+1'#sqllite数据库操作
  pull_to_refresh: '^1.1.5'#下拉刷新上拉加载更多
  video_player: '0.6.1'#视频播放
  collection: '1.14.11'#集合操作工具类
  device_info: '0.2.1'#获取手机信息
  flutter_svg: '^0.3.2'#展示svg图标控件
  intl: any#国际化工具类
  connectivity: '0.3.1'#链接网络
  flutter_staggered_grid_view:#瀑布流展示控件
  flutter_file_manager:#文件管理
  loader_search_bar:#导航栏搜索控件
  flutter_image_compress : any#图片压缩
  ota_update : any#App下载更新
  flutter_slidable：#item侧滑控件 
  vercoder_inputer: ^0.8.0#验证码输入框
  flutter_app_badger: ^1.0.2#桌面提示角标
  flutter_badge: 0.0.1#控件显示角标
  flutter_local_notifications: #设置通知栏消息提示
  dragablegridview_flutter: ^0.1.9#可拖动删除的GridView
  extended_image:  强大的官方Image扩展组件，支持加载以及失败显示，缓存网络图片，缩放拖拉图片，图片浏览（微信掘金效果），滑动退出页面（微信掘金效果），裁剪，保存，绘制自定义效果等功能
  cool_ui: "^0.1.14"#自定义键盘


pull_to_refresh//上啦加载  下拉刷新
video_player//视频播放插件
shared_preferences/数据共享插件
flutter-html//富文本
permission_handler//权限验证
cached_network_image flutter的加载图片中的插件
flutter_staggered_grid_view瀑布流组件
flutter_easyrefresh上拉加载下拉刷新
fluttertoast//flutter弹框
dio: ^3.0.3//ajax请求插件
flutter_screenutil: ^2.3.0//屏幕分辨率适配插件
flutter_swiper: ^1.1.6//轮播图插件
/解析Json数据格式
dependencies里面
json_annotation: ^ 3.0.0
dev_dependencies里面
build_runner: ^ 1.0.0 
json_serializable: ^ 3.2.0
flare_flutter flutter 动画
//大神博客
http://www.ptbird.cn/category/flutter/
	listTile（
		leading：
		title：
		trailing：
	）
	GestureDetector//手势控制
	//层叠样式组件
	 Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('商品详情'),
          centerTitle: true,
        ),
        body: Stack(children: <Widget>[
          Container(
            width: ScreenUtil().setWidth(750),
            child: ListView(
              children: <Widget>[
                Text('立即购买'),
                Text('立即购买'),
                Text('立即购买'),
              ],
            ),
          ),
          Positioned(
            width: ScreenUtil().setWidth(750),
            height: ScreenUtil().setHeight(110),
            bottom: 0,
            left: 0,
            child: Text('测试'),
          )
        ]));
  }

///动画  contanier
AnimatedContainer(
      height: click ? 200 : 100,
      width: click ? 200 : 100,
      decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
            fit: BoxFit.cover,
          ),
          borderRadius: BorderRadius.all(Radius.circular(
            click ? 200 : 0,
          ))),
      duration: Duration(seconds: 3),
      curve: Curves.linear,
      onEnd: (){
        setState(() {
          click = !click;
        });
      },
    )

Container()
width
height
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
padding: EdgeInsets.fromLTRB(2, 0, 2, 0),
decoration:BoxDecoration(
	//圆角
	 borderRadius: BorderRadius.circular(4),
	//线框
	border: Border.all( color: Color.fromRGBO(225, 52, 52, 1), width: 0.5)
	//修改颜色
	color: Color.fromRGBO(255, 255, 255, 0.3),
       //颜色渐变   
      gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color.fromRGBO(49, 213, 159, 1),
            Color.fromRGBO(255, 255, 255, 1),
          ],
    ),  
    //阴影
    boxShadow: [
      BoxShadow(
        blurRadius: 1, //阴影范围
        offset: Offset(2, 1),
        spreadRadius: 1, //阴影浓度
        color: Color.fromRGBO(235, 235, 235, 1), //阴影颜色
      ),
    ], 
)
//选中
checkbox(
	value:'',
	activeColor:Colors.pink,
	onChanged:(bool val  ){
	}
)
//图片样式设置

Image.network()  
CircleAvatar //圆角组件

用 ClipRRect（）组件设置图片圆角
ClipRRect(
		//所有圆角的设置
         borderRadius: BorderRadius.circular(8),
         //单个圆角设置
         borderRadius:BorderRadius.only(topLeft: Radius.circular(9)),
         child: new Image.network(
            "${swiperDateList[index]['image']}",
            //fit必须设置cover属性
            fit: BoxFit.cover,
          ),
  ),
//文字标签
Text（）
//设置单行文本过多隐藏
 maxLines: 1,//几行
overflow: TextOverflow.ellipsis,
//文字样式
 style: TextStyle(
 fontSize: 14，
 //字体颜色
 color: Color.fromRGBO(225, 52, 52, 1)
 //文字中间添加一条清除线
 decoration: TextDecoration.lineThrough,
                  decorationColor: const Color(0xff000000)),
 ),



//滚动列表
ListView（）

//设置滚动方向
 scrollDirection: Axis.horizontal,
 children：//数据map渲染的时候记得加tolist()
//InkWell组件
InkWell()
//直接写点击事件
onTap: () {
    print('点击导航');
  },
网格布局
GridView.count（
 shrinkWrap 常用于内容大小不确定情况，如果滚动视图(ListView/GridView/ScrollView 等)没有收缩包装，则滚动视图将					
 扩展到允许的最大大小。如果是无界约束，则 shrinkWrap 必须为 true。
  primary 如果为 true，即使滚动视图没有足够的内容来支撑滚动，滚动视图也是可滚动的。否则，默认为 false 情况 
  下，只有具有足够内容的用户才能滚动视图。

	primary: false,
    shrinkWrap: true,
）||GridView.builder（）（builder暂时不写  用到的时候再记录）
//一排显示几行
crossAxisCount: 5

//网页过多能滚动
SingleChildScrollView（）

//盒子竖向布局
Column（）
//设置排向
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
//盒子横向布局
row（）


flutter保持主页面状态

添加 官方的  AutomaticKeepAliveClientMixin
 bool get wantKeepAlive => true;
然后在父页面用IndexedStack

Flutter安装目录/packages/flutter_tools/gradle/flutter.gradle

maven { url ‘https://maven.aliyun.com/repository/google’ }
maven { url ‘https://maven.aliyun.com/repository/jcenter’ }
maven { url ‘http://maven.aliyun.com/nexus/content/groups/public’ }

使用scoffold 键盘唤起报错 长度溢出
使用SingleChildScrollView 组件