1、 Flutter 目录结构介绍
文件夹 | 作用 |
---|---|
android | android 平台相关代码 |
ios | ios 平台相关代码 |
lib | flutter 相关代码,我们主要编写的代 码就在这个文件夹 |
test | 用于存放测试代码 |
pubspec.yaml | 配置文件,一般存放一些第三方库的依赖。 |
2、Flutter 入口文件、入口方法
void main(){ runApp(MyApp());
}
也可以简写
void main()=>runApp(MyApp());
3、Flutter 第一个 Demo Center组件的使用
void main() => runApp(new Center(
child: new Text(
"第一个futter项目",
textDirection: TextDirection.ltr,
style: new TextStyle(color: Colors.yellow, fontSize: 14.0),
),
));
4、Flutter 把内容单独抽离成一个组件
在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget 前期我们都继承 StatelessWidget。
class MyCenter extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text(
"第一个futter项目",
textDirection: TextDirection.ltr,
style: new TextStyle(color: Colors.yellow, fontSize: 14.0),
),
);
}
}
5、给 Text 组件添加一些属性
class MyCenter extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text(
"第一个futter项目",
textDirection: TextDirection.ltr,
style: new TextStyle(
// color: Colors.yellow,
color: Color.fromARGB(255, 0, 122, 0),
fontSize: 14.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic),
),
);
}
}
6、用MaterialApp 和 Scaffold两个组件装饰 App
6.1、MaterialApp
MaterialApp 是一个方便的 Widget,它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用,常用的属性有:
- home(主页)
- title(标题)
- color(颜色)
- theme(主题)
- routes(路由)
6.2、Scaffold
Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。常用的属性有:
- appBar - 显示在界面顶部的一个 AppBar。
- body - 当前界面所显示的主要内容 Widget。
- drawer - 抽屉菜单控件。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = '标题';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
///卡片包装
child: new Card(
///增加点击效果
child: new FlatButton(
onPressed: () {
print("点击了哦");
},
child: new Padding(
padding: new EdgeInsets.only(
left: 0.0, top: 10.0, right: 10.0, bottom: 10.0),
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
///文本描述
new Container(
child: new Text(
"首先我们创建一个私有方法_getBottomItem,返回一个 Expanded Widget,因为后面我们需要将这个方法返回的 Widget 在 Row 下平均充满",
style: TextStyle(
color: Colors.black,
fontSize: 14.0,
),
///最长三行,超过 ... 显示
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
margin: new EdgeInsets.only(top: 6.0, bottom: 2.0),
alignment: Alignment.topLeft),
new Padding(padding: EdgeInsets.all(10.0)),
///三个平均分配的横向图标文字
new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_getBottomItem(Icons.star, "1000"),
_getBottomItem(Icons.link, "1000"),
_getBottomItem(Icons.subject, "1000"),
],
),
],
),
))),
);
}
}
///返回一个居中带图标和文本的Item
_getBottomItem(IconData icon, String text) {
///充满 Row 横向的布局
return new Expanded(
flex: 1,
///居中显示
child: new Center(
///横向布局
child: new Row(
///主轴居中,即是横向居中
mainAxisAlignment: MainAxisAlignment.center,
///大小按照最大充满
mainAxisSize: MainAxisSize.max,
///竖向也居中
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
///一个图标,大小16.0,灰色
new Icon(
icon,
size: 16.0,
color: Colors.grey,
),
///间隔
new Padding(padding: new EdgeInsets.only(left: 5.0)),
///显示文本
new Text(
text,
//设置字体样式:颜色灰色,字体大小14.0
style: new TextStyle(color: Colors.grey, fontSize: 14.0),
//超过的省略为...显示
overflow: TextOverflow.ellipsis,
//最长一行
maxLines: 1,
),
],
),
),
);
}