(1) Grundstruktur des Flatterns
Erstellen Sie die Grundstruktur des Projekts
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")
);
}
}
So passen Sie Komponenten an
Zunächst müssen Sie mithilfe der Klasse eine benutzerdefinierte Komponente homeContent erstellen.
//自定义组件 内容组件
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Text("xxxdasdx"),
);
}
}
Rufen Sie die Komponente an der entsprechenden Stelle auf
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title:Text("flutter")
),
//TODO:内容主体，调用自定义组件
body: HomeContent()
)
);
(2) Containerkomponente, Textkomponente
Die Containerkomponente ist eine Containerkomponente, die einem Div für die Webentwicklung entspricht. Untergeordnete Komponenten können auch in der Containerkomponente angegeben werden.
Container () entspricht dem Konstruktor, und das untergeordnete Element entspricht einem der Parameter. Daher entsprechen die Parameter hier den Attributen in der Webentwicklung.
return Center(
child:Container(
child:Text("我是一个文本！"),
),
);
Die Parametereigenschaften der Textkomponente lauten wie folgt:
Wählen Sie den Parameter aus und drücken Sie die Strg-Maus, um die Eigenschaften des Parameters anzuzeigen. .
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,//设置字间距
),
),
Eigenschaften der Containerkomponente
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) Bildkomponente
1. Führen Sie lokale Komponenten ein
child:Image.asset(name),//name为路径
....参数配置图片属性
2. Führen Sie Remote-Bilder ein
child:Image.network(src),
....参数配置图片属性
(4) ListView-Basislistenkomponente
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) Polsterkomponente
Gängige Tags in HTML haben Auffüllattribute, aber viele Widgets in Flutter haben keine Auffüllattribute. Derzeit können wir die Auffüllkomponente verwenden, um den direkten Abstand zwischen dem Container und den untergeordneten Elementen zu handhaben.
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),
),
Benutzerdefinierte Farben, dynamische Wertübertragung.
//自定义组件 内容组件
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),
),
);
}
}
Zeilenlayout und sein Weg
//自定义组件 内容组件
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),
],
)
);
}
}