flutter入门教程-从零开始

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的使用

上一篇下一篇

猜你喜欢

热点阅读