创建一个App
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: new Scaffold(
appBar: new AppBar(
centerTitle: true,
title: new Text("AppBar title"),
),
body: new Center(
child: new Text("Hello Flutter"),
),
));
}
-
main()函数为应用入口，runApp()方法启动Flutter应用，需要传入一个Widget参数，=>单行函数或方法的简写 -
AppBar标题栏，设置centerTitle为true居中显示标题，Text文本
FloatingActionButton
Material风格悬浮按钮
floatingActionButton: new FloatingActionButton(
onPressed: _routeTest,
child: new Icon(Icons.add),
)
-
onPressed点击事件 此处添加了跳转界面方法 -
Icon系统自带的图标
界面跳转
///界面跳转
void _routeTest() {
//跳转
Navigator.push(context, new MaterialPageRoute(builder: (context) {
return new NewRoute();
}));
}
- 需要导入dart文件
import 'NewRoute.dart';或者
//需要先注册路由表
routes: {
"new_route": (context) => NewRoute(),
}
///界面跳转
void _routeTest() {
//命名路由跳转
Navigator.pushNamed(context, "new_route");
}
加载图片
1.加载本地图片，首先在项目根目录创建一个images文件夹，将图片放入，然后再pubspec.yaml中的flutter:下添加
assets:
- images/ic_back.png
代码中使用
child: Image(
image: AssetImage("images/ic_back.png"),
width: 100
),
2.加载网络图片
child: Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100,
)
布局Widget
- 水平布局
Row
body: Row(
//宽度占多少 max:充满 min:适应控件的宽度
mainAxisSize: MainAxisSize.max,
//水平对齐方式 start:居左 center:居中 end:居右
mainAxisAlignment: MainAxisAlignment.start,
//垂直对齐方式 start:居上 center:居中 end:居下
crossAxisAlignment: CrossAxisAlignment.end,
//布局方式 ltr:从左到右 rtl:从右到左
textDirection: TextDirection.ltr,
//children:子widget组
children: <Widget>[
Text(
"first text",
style: TextStyle(fontSize: 30),
),
Text("second text"),
],
),
- 垂直布局
Column
body: Column(
//宽度占多少 max:充满 min:适应控件的宽度
mainAxisSize: MainAxisSize.max,
//垂直对齐方式 start:居左 center:居中 end:居右
mainAxisAlignment: MainAxisAlignment.start,
//水平对齐方式 start:居上 center:居中 end:居下
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"first text",
style: TextStyle(fontSize: 30),
),
Text("second text"),
],
),
- 弹性布局
Flex
body: Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
//弹性系数
flex: 1,
child: Container(
height: 30,
color: Colors.yellowAccent,
),
),
Expanded(
flex: 2,
child: Container(
height: 30,
color: Colors.lightBlue,
),
)
],
),
Expanded按比例扩伸子widget空间，flex属性类似设置weight
- 按照1：2的比例显示按钮
Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex: 1,
///ConstrainedBox给子widget添加约束
child: ConstrainedBox(
//设置宽度充满屏幕
constraints: BoxConstraints(minWidth: double.infinity),
child: blueBtn,
),
),
Expanded(
flex: 2,
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: double.infinity),
child: Container(
margin: EdgeInsets.only(left: 10),
child: blueBtn,
),
),
),
],
),
///按钮
Widget blueBtn = RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: Colors.blue,
textColor: Colors.white,
child: Text("Button"),
);
- 流式布局，可以自动换行
Center(
child: Wrap(
//水平方向间距
spacing: 10,
//垂直方向间距
runSpacing: 5,
//多行对齐方式
alignment: WrapAlignment.center,
children: <Widget>[
Chip(
label: Text("One"),
avatar: CircleAvatar(
backgroundColor: Colors.blue,
child: Text("A"),
),
),
Chip(
label: Text("Two"),
avatar: CircleAvatar(
backgroundColor: Colors.blue,
child: Text("B"),
),
),
Chip(
label: Text("Three"),
avatar: CircleAvatar(
backgroundColor: Colors.blue,
child: Text("C"),
),
),
Chip(
label: Text("FourFourFour"),
avatar: CircleAvatar(
backgroundColor: Colors.blue,
child: Text("D"),
),
),
],
),
),
