flutter项目的基本目录
文件夹 | 作用 |
---|---|
android | android 平台相关代码 |
ios | ios 平台相关代码 |
lib | flutter 相关代码,我们主要编写的代 码就在这个文件夹 |
test | 用于存放测试代码 |
pubspec.yaml | 配置文件,一般存放一些第三方库的依赖 |
Flutter 把内容单独抽离成一个组件
flutter中自定义组件其实就是一个类,这个类继承StatelessWidget或StatefulWidget
StatelessWidget 是无状态组件,状态不可变的 widget
StatefulWidget 是有状态组件,持有的状态可能在 widget
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
"我是一个文本内容",
textDirection: TextDirection.ltr, //设置text文本方向
),
);
}
}
MaterialApp
1、MaterialApp MaterialApp 是一个方便的 Widget,它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用。 常用的属性:
home(主页)
title(标题)
color(颜色)
theme(主题)
routes(路由)
2、Scaffold Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、 snackbar 和底部 sheet 的 API
Scaffold 有下面几个主要属性:
appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
drawer - 抽屉菜单控件
抽离出单独组件
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title:"我是一个标题",
home:Scaffold(
appBar: AppBar(
title:Text('IT 营'),
elevation: 30.0, //设置标题阴影 不需要的话值设置成 0.0 ),
),
body: MyHome(),
),
theme: ThemeData( //设置主题颜色
primarySwatch: Colors.yellow,
),
);
}
}
class MyHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
"我是 Dart 一个文本内容",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.black38
// color: Color.fromRGBO(255, 222, 222, 0.5)
),
),
);
}
}