Flutter UI界面搭建基础组件和打包过程

FLutter初学（UI界面搭建）

Flutter 关键字:
https://www.jianshu.com/p/524e481ef3f6

Flutter 组件:

   1.Text
   textAlign:TextAlign.left,//文字在容器中的位置
   maxlines:1, //最大的行数
   overflow: TextOverflow.ellipsis,//文字过多后面用...
   style:TextStyle(//文字样式
      fontSize: 18.0// 文字大小 浮点类型
      color:Color.fromARGB(255,255,125,125),//文字颜色
	  //  decoration可以设置边框、背景色、背景图片、圆角等属性
	  decoration:TextDecoration.underline,//这儿是下划线
          //注意的是 deoration和 color： 背景颜色不能共存，二者同时只能有一个
	  decorationStyle:TextDecorationStyle.solid,
	  fontWeight: FontWeight.w700,//字重  粗细
	  fontStyle: FontStyle.italic,//斜体
	  'letterSpacing: 10.0  // 字符间距'
	  wordSpacing: 15.0//字或单词间距',
	  'decoration: TextDecoration.overline //上划线',
	  'decoration: TextDecoration.lineThrough //删除线',
   )

	   2.ListView
	   
	    (1)  child: new ListView(
		 scrollDirection: Axis.horizontal,//横向还是纵向//默认是纵向
		 children: <widget>[//添加子元素
		   new Container(//创建一个容器
		      //创建条目属性		   
		   )		
		 ]		 
		 )
		 (2) new ListView.builder(
		    itemCount:items.length//数据的长度
			itemBuilder:(context,index){
			      return new ListTitle(
				  title :new Text("")
				  );
			}
		   )
		 
		 
		
        3.Image	//图片空间
		new Image.network('')//网络图片
		new Image.file()//本地文件
		new Image.asset()//本地资源
		
		
		
		
		4.Swiper //轮播控件
		 itemCount : 10; //数据长度
		 itemBuilder(context,index);
		 return Container(
            decoration: BoxDecoration(//圆角
              borderRadius: BorderRadius.circular((10.0)), // 圆角度
              image: DecorationImage(
                image: NetworkImage(bannerDatas[index].imagePath),
                fit: BoxFit.fill,//全部充满
              ),
            ),
         loop: false,
        autoplay: false,
        autoplayDelay: 3000,
        //触发时是否停止播放
        autoplayDisableOnInteraction: true,
        duration: 600,
        //默认分页按钮

//        control: SwiperControl(),
        controller: _swiperController,
        //默认指示器
        pagination: SwiperPagination(
          // SwiperPagination.fraction 数字1/5，默认点
          builder: DotSwiperPaginationBuilder(size: 6, activeSize: 9),
        ),

    //视图宽度，即显示的item的宽度屏占比
    viewportFraction: 0.8,
    //两侧item的缩放比
    scale: 0.9,		


   
    5.Container 组件
     Container（容器控件）在Flutter是经常使用的控件之一，其作用是方便我们进行布局，对布局进行统一规划。
	 属性有:
	 (1)alignment属性.
	    alignment是用来控制容器内子内容的对齐方式，对其方式有:
		bottomCenter:下部居中对齐。
        botomLeft: 下部左对齐。
      (2)Padding属性.
        padding: EdgeInsets.fromLTRB(左、上、右、下。)		
        padding: EdgeInsets.all(20.0),//四边都相同
	  (3)margin属性.		  
		margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0)
	  (4)decoration属性.
        decoration：用来为container设置背景和边框。	


   //边框
	border: new Border.all(width: 1, color: Colors.red),
	
	
	//按钮底下的阴影
	decoration: new BoxDecoration(
                  color: Colors.white,
                  //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
                  borderRadius: BorderRadius.all(Radius.circular(25.0)),
                    boxShadow: [
                    BoxShadow(
                    color: Colors.black26,  //底色,阴影颜色
                    offset: Offset(0.0, 4.0), //阴影位置,从什么位置开始
                    blurRadius: 1,  // 阴影模糊层度
                    spreadRadius: 0,  //阴影模糊大小
                    )],
                ),
	
	
	
	//圓角
	decoration: new BoxDecoration(
         color: Color.fromRGBO(248, 150, 83, 0.5),
      //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
       borderRadius: BorderRadius.all(Radius.circular(25.0)),
      ),
	
		渐变色  在Container中常用
          decoration: new BoxDecoration(
                gradient: const LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.red, Colors.orange]),

        6 常见的Row行 Column竖
 		  属性有:
		  MainAxisSize：　　控制自己的布局方式
　　      MainAxisSize.min　　默认值，Column和Row自适应children；
　　      MainAxisSize.max　　Column填充父控件竖屏，Row填充父控件横屏；需要搭配MainAxisAlignment使用才有效果；
 
          MainAxisAlignment：　　控制子集的对齐方式，Column上下对齐，Row左右对齐
　　      MainAxisAlignment.start　　默认值，Column靠上，Row靠左；
　　      MainAxisAlignment.center　　Column,Row居中；
　　      MainAxisAlignment.end　　Column靠下，Row靠右；
　　      MainAxisAlignment.spaceAround　　自己填充，等份分配空间给子集，子集各自居中对齐；
　　      MainAxisAlignment.spaceBetween　　自己填充，等份分配空间给子集，子集两侧对齐；
　　      MainAxisAlignment.spaceEvenly　　自己填充，等份分配空间给子集，子集同一中线居中对齐；
　　      注：当设置MainAxisSize.max时才该值有效果。
 
 
          CrossAxisAlignment：　　　控制子集各自的对齐方式，Column左右对齐，Row上下对齐
　　      CrossAxisAlignment.strech       　Column中会使子控件宽度调到最大，Row则使子控件高度调到最大
　　      CrossAxisAlignment.start　　　   Column中会使子控件向左对齐，Row中会使子控件向上对齐
　　      CrossAxisAlignment.center　　　默认值，子控件居中
　　      CrossAxisAlignment.end　　　　Column中会使子控件向右对齐，Row中会使子控件向下对齐
　　      CrossAxisAlignment.baseline　　按文本水平线对齐。与TextBaseline搭配使用
 
 
          TextBaseline：
　　      TextBaseline.alphabetic　　  用于对齐字母字符底部的水平线。
　　      TextBaseline.ideographic　　用于对齐表意字符的水平线。
 
 
          VerticalDirection：　　控制子控件对齐方式是否相反方式
　　      VerticalDirection.down　　默认值，按照默认方式
　　      VerticalDirection.up　　　CrossAxisAlignment.start跟CrossAxisAlignment.end对反

		 
		如果要我写这个 我会用Column 竖着排列
		然后子widget中用Expanded来分布他们的所占高度比例
		Expanded中的flex : 1,  这个可以设置每个widget的比列
		
		
		Column()[
		Expanded()//该控件是均匀分布的 在 Column中按比例来分布widget ，相当于Android中线性布局的权重
		  Expanded(){
		     flex :2,
			 Container(){
			 
			  child:Container(){
			    
			    你的widget需要居中
			    widget高度固定
			  }
			 }
		  }
         ...
		]

		Expanded()//该控件是均匀分布的 
		(   1   2   3    4  )===就这样

```
	滑动控件
	SingleChildScrollView(
            scrollDirection: Axis.vertical,
			)垂直滑动
			
			
			
	

    可以透明空间  或者 Color(0XCC....)为透明
	Opacity(
	opacity: 0.8,
	child : ---
	)
	
	
	隐藏显示控件
	Offstage(
	  offstage ：true,
	)

Stack:::=======
alignment : 指的是子Widget的对其方式，默认情况是以左上角为开始点 ，这个属性是最难理解的，它区分为使用了Positioned和未使用Positioned定义两种情况，没有使用Positioned情况还是比较好理解的，下面会详细讲解的

fit :用来决定没有Positioned方式时候子Widget的大小，StackFit.loose 指的是子Widget 多大就多大，StackFit.expand使子Widget的大小和父组件一样大

overflow :指子Widget 超出Stack时候如何显示，默认值是Overflow.clip，子Widget超出Stack会被截断，

Overflow.visible超出部分还会显示的
		
const Positioned({
    Key key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  })

1.在同一个方向上，只能同时使用其中的两个属性，比如水平方向上只能使用left,right,width中的两个，第三个会自动计算。
2.Positioned通常和Stack一起使用，left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。

最后的最后— 记录下flutter 打一个安卓包
其实和原生安卓打包的逻辑都一样 同样需要

这些文件

首先在命令行黑窗口

切记 到现在是没有xxxx.jsk文件的 这里不要发生疑惑 xxx.jks是自己手写出来的

keytool -genkey -v -keystore D:\WorkAdress\Work\huluobo\client\XXXX.jks（jks地址） -keyalg RSA -keysize 2048 -validity 10000 -alias XXXX（别名）
**
**

切记括号中的内容属于注释（提示）内容

**

切记

**** XXXX.jks和别名的名字是一样的** {本白犯过这样的错-----所以指出来了}

然后会出现

**
此时xxxx.jks文件就出来了
**

这个只需要记住前俩个口令 就是你的别名密码 俩个也是一样的
剩余的随便填
接下来
keytool -list -v -keystore D:\WorkAdress\Work\huluobo\client\android\app\key\huluobo.jks（jks路劲） -alias huluobo（别名） -storepass hlb123456（上一部设置的密码） -keypass hlb123456（上一部设置的密码）

然后在android中的build.gradle中


会出现这个 里面的值 有需要的可以用

**

最后

命令行 ：flutter build apk
release.apk安装包就出来了，至于在哪个目录自己去找吧
如果过程遇到问题 那就查百度吧（或者可以找我 聊聊）

**

## 万丈高楼平地起 辉煌只能靠自己。