1.flutter基本操作及其Container、Text组件属性

（1）flutter基本结构

搭建好工程基本结构

import 'package:flutter/material.dart';


void main(){

  runApp(new MyApp());
}

class MyApp  extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter")
        ),
        //TODO:内容主体
        body: HomeContent()
      )
    );
  }
}

//自定义组件 内容组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Text("你好flutter")
    );
  }
}

自定义组件的方法

首先需要使用class创建自定义组件homeContent。

//自定义组件 内容组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Text("xxxdasdx"),
    );
  }
}

在适当的地方进行调用该组件

 return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter")
        ),
        //TODO:内容主体，调用自定义组件
        body: HomeContent()
      )
);

（2）Container组件、Text组件

Container组件是一个容器组件，相当于web开发的div，在容器组件中也可以指定孩子组件。

Container（）相当于构造函数，里面的child相当于其中的一个参数，所以这里的参数等同于web开发中的属性。

 return Center(
      child:Container(
         child:Text("我是一个文本！"),
      ),
  );

文本组件的参数属性如下：

选中参数并按下ctrl鼠标单击可以看到其参数的属性。。

Text(
             "我是一个文本大苏打萨达萨达是啊实打实大苏打啊倒萨打算萨达萨达！",
           textAlign: TextAlign.left,//靠右对齐
           //如果文字溢出，后面显示三个点...
           overflow: TextOverflow.ellipsis ,
           maxLines: 1,//最大行数显示为1行
           textScaleFactor: 2,//字体放大两倍
           style:TextStyle(
             fontSize: 16.0,//字体大小
             color:Colors.red,//字体颜色
             fontWeight: FontWeight.w800,//字体加粗为3倍
             fontStyle:FontStyle.italic,//设置倾斜
             decoration: TextDecoration.lineThrough,//下滑线穿过文字
             decorationColor: Colors.white,//穿过的线为白线
             decorationStyle: TextDecorationStyle.dashed,// 穿过的线为虚线
             letterSpacing:2.0,//设置字间距
           ),
         ),

Container组件的属性

      child:Container(
         child: .......Container中的孩子（Text,如上）
         //设置这个Container容器的属性
         height: 300.0,
         width: 300.0,
        //设置一个盒子
        decoration: BoxDecoration(
          //背景颜色
          color:Colors.yellow,
          //边框颜色
          border:Border.all(
            color:Colors.blue,
            width: 2
          ),
         //设置圆角
         borderRadius:BorderRadius.all(
           Radius.circular(10)
         ),
        ),
         // padding:EdgeInsets.all(20) 全部为20
        //padding:EdgeInsets.fromLTRB(10, 30, 5, 0)//左上右下边距（内边距）
          margin:EdgeInsets.fromLTRB(10, 30, 5, 0),//左上右下边距（外边距）
         // transform:Matrix4.translationValues(100,0,0)//x轴位移100
         // transform:Matrix4.rotationZ(0.3),//沿着z轴旋转
        alignment:Alignment.bottomLeft,//文字居底部左侧
      ),

(3)图片组件

1.引入本地组件

child:Image.asset(name),//name为路径
....参数配置图片属性

2.引入远程图片

child:Image.network(src),
....参数配置图片属性

(4)ListView基础列表组件

 return  ListView(
      children:<Widget>[
        ListTile(//指定列表标题
          //加入图标
          leading: Icon(Icons.settings),
          title:Text(
              "华北说的",
            style:TextStyle(
              fontSize:20
            ),
          ),//一级标题
          subtitle: Text("加你搞"),//二级标题
        ),
        ListTile(//指定列表标题
          title:Text("华北说的"),//一级标题
          subtitle: Text("加你搞"),//二级标题
        ),
        ListTile(//指定列表标题
          title:Text("华北说的是方法"),//一级标题
          subtitle: Text("加你搞后"),//二级标题
        )
      ],
      padding: EdgeInsets.all(10),//边框为10
    );

（5）Padding组件

在html中常见标签都有padding属性，但是Flutter中很多widget是没有padding属性的，这个时候我们就可以用padding组件处理容器与子元素直接的间距。

   return GridView.count(
      crossAxisCount: 2,
        children:<Widget>[
  //使用fit:BoxFit 填充网格        Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover),
         Image.network('https://www.itying.com/images/flutter/2.png',fit:BoxFit.cover),]
         );

  Padding(
              padding:EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover),
          ),

自定义颜色，动态传值。

//自定义组件 内容组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return IconContainer(Icons.search,color:Colors.black) ;
  }
}

class IconContainer extends StatelessWidget{
  //动态传入大小、颜色
  double size=32.0;
  IconData icon;
  Color color;
  //  定义一个构造函数,icon必选参数，其他为可选
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
   return Container(
     height: 100.0,
     width:100.0,
     color:this.color,
     child:Center(
       child:Icon(this.icon,size:this.size,color: Colors.white),
     ),
   );
  }

}

Row布局对其方式

//自定义组件 内容组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 600.0,
      width: 400.0,
      color: Colors.yellow,
      child:Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,//水平方向居中显示   spaceAround、spaceBetween、spaceEvenly(均匀分布),
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          IconContainer(Icons.search,color:Colors.black),
          IconContainer(Icons.settings,color:Colors.red),
          IconContainer(Icons.home,color:Colors.blue),
        ],
      )

    );

  }
}