(1) Estructura básica del aleteo
Construye la estructura básica del proyecto.
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")
);
}
}
Cómo personalizar componentes
Primero, necesita crear un componente personalizado homeContent usando class.
//自定义组件 内容组件
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Text("xxxdasdx"),
);
}
}
Llame al componente en el lugar apropiado
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title:Text("flutter")
),
//TODO:内容主体，调用自定义组件
body: HomeContent()
)
);
(2) Componente contenedor, componente Texto
El componente Container es un componente contenedor, que es equivalente a un div para desarrollo web. Los componentes secundarios también se pueden especificar en el componente contenedor.
Container () es equivalente al constructor, y el niño dentro es equivalente a uno de los parámetros, por lo que los parámetros aquí son equivalentes a los atributos en el desarrollo web.
return Center(
child:Container(
child:Text("我是一个文本！"),
),
);
Las propiedades de los parámetros del componente de texto son las siguientes:
Seleccione el parámetro y presione Ctrl del mouse para hacer clic y ver las propiedades del parámetro. .
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,//设置字间距
),
),
Propiedades del componente contenedor
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) Componente de imagen
1. Introducir componentes locales
child:Image.asset(name),//name为路径
....参数配置图片属性
2. Introducir imágenes remotas
child:Image.network(src),
....参数配置图片属性
(4) Componente de lista básica 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) Componente de relleno
Las etiquetas comunes en html tienen atributos de relleno, pero muchos widgets en Flutter no tienen atributos de relleno. En este momento, podemos usar el componente de relleno para manejar el espacio directo entre el contenedor y los elementos secundarios.
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),
),
Colores personalizados, transferencia dinámica de valor.
//自定义组件 内容组件
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),
),
);
}
}
Diseño de filas y su forma
//自定义组件 内容组件
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),
],
)
);
}
}