1.フラッターの基本操作とそのコンテナーおよびテキストコンポーネントのプロパティ

（1）フラッターの基本構造

プロジェクトの基本構造を構築する

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

コンポーネントをカスタマイズする方法

まず、クラスを使用してカスタムコンポーネント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コンポーネントは、Web開発用のdivに相当するコンテナーコンポーネントです。子コンポーネントは、コンテナーコンポーネントで指定することもできます。

Container（）はコンストラクターと同等であり、内部の子はパラメーターの1つと同等であるため、ここでのパラメーターは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,//设置字间距
           ),
         ),

コンテナコンポーネントのプロパティ

      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）パディングコンポーネント

htmlの一般的なタグにはパディング属性がありますが、Flutterの多くのウィジェットにはパディング属性がありません。現時点では、パディングコンポーネントを使用して、コンテナーと子要素の間の直接の間隔を処理できます。

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

}

行レイアウトとその方法

//自定义组件 内容组件
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),
        ],
      )

    );

  }
}