flutter入门教程-从零开始-2 Hello world
2018-12-29 本文已影响0人
cosfun
将以下代码复制进main.dart中,运行
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("hello world",
textDirection: TextDirection.ltr
),
),
);
}
}
效果如下
hello world.png
暂时从代码的return部分开始关注
1.Container
return Container(
child: Center(
child: Text("hello world",
textDirection: TextDirection.ltr
),
),
);
Container是dart中 new Container的简略写法。
Container在flutter中是一个widget,界面是由各种widget组合而成,布局,文本框,各种控件都可以是一个widget,widget可以嵌套在另一个widget中。
这里简单的理解在Container这个容器中,可以放入一个子widget,这个widget是center,
Container的构造函数
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})
{}括号表示这些参数都是可选的,child在最后一个。
2.center
center的构造函数,child在最后一个。
Center({ Key key, double widthFactor, double heightFactor, Widget child })
这里先简单的理解center就如字面意思一样,让布局居中显示,可以看到hello world在屏幕上是居中的,这个就是center的功劳。
3.text
Text("hello world",
textDirection: TextDirection.ltr
)
Text显示一个文本框。
这里对hello world进行了一个初步的了解,内容非常简单,
下一节将在此基础上,更加深入了解Text的使用