1.Hello world
import 'package:flutter/material.dart';
void main() {
runApp(Center(
child: Text(
'Hello world',
textDirection: TextDirection.ltr,
),
));
}
- 在程序的开头我们使用import来引入非本文档内的资源(工具类,部件等),'package:flutter/material.dart' 这个包则google提供的一套界面的设计规则(也可以说是一套基本部件);
-
void main()是程序的入口,runApp则代表开始运行程序其内的参数表示要展示的部件;
-
Center和Text会在后续进行介绍,这里只简单说明,center是让其子部件居中的一种布局方式,Text代表文本部件。
2.自定义一个静态小部件
效果与第一节相同
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Hello world',
textDirection: TextDirection.ltr,
),
);
}
}
- 创建了一个名字为MyApp的类(部件),继承于StatelessWidget(静态部件:内部不产生数据变化,纯碎为了展示的部件);
- 继承StatelessWidget后需要重写build的方法,此方法返回一个部件;
- 在main函数的runApp中将MyApp实例后(在dart中new一个对象时,new可以省略)放入。
3.文字样式
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Hello world',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold
),
),
);
}
}
- 使用style来添加文字样式,Text组件样式的类型需为TextStyle;
- 在TextStyle中可以自行定义样式。
4.使用Material风格
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Hello(),
),
);
}
}
class Hello extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Hello world',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold
),
),
);
}
}
- 使用MaterialApp对原来的控件进行包裹,我们前面说过Material是一种设计规则,当时用MaterialApp进行包裹时,其内部的控件就会将一些属性设为默认值,比如Text部件,之前我们需要制定字体的排列方式,现在则不用,默认就是从左往右进行排列。
4.1添加顶部导航栏并设置主题色
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.green
),
home: Scaffold(
appBar: AppBar(
title: Text('Gecer'),
),
body: Hello(),
),
);
}
}
- 在Scaffold中添加appBar,即可添加顶部导航栏;
- 在MaterialApp中设置theme,即可设置主题相关数据,primaryColor则代表主题色。