美文网首页
Flutter轻松入门(四)-- 编写最简单的Hello wor

Flutter轻松入门(四)-- 编写最简单的Hello wor

作者: SuperGino | 来源:发表于2018-06-18 19:05 被阅读0次

    学习必须要从最简单的开始😀

    删除lib / main.dart中的所有代码,添加下面最简单的文本显示代码

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(
        new Center(
          child: new Text(
            'Hello, world!',
            textDirection: TextDirection.ltr,
          ),
        ),
      );
    }
    

    简单说一下

    • main函数是flutter应用的入口函数。
    • runApp函数作用把指定的组建显示到屏幕上,并且布满屏幕。
    • 上面的实例使用了两个组件:
      Center组件:把子组件的对齐方式居中显示。
      Text组件:文本组件,显示一段文本,是flutter最常用的组件之一。

    尝试添加Material Design样式,参考下面代码

    import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Welcome to Flutter',
          home: new Scaffold(
            appBar: new AppBar(
              title: new Text('Welcome to Flutter'),
            ),
            body: new Center(
              child: new Text('Hello World'),
            ),
          ),
        );
      }
    }
    

    界面上就会显示出下面样式,后面我们会详细介绍各种组件的使用方法


    hello-world-screenshot.png

    相关文章

      网友评论

          本文标题:Flutter轻松入门(四)-- 编写最简单的Hello wor

          本文链接:https://www.haomeiwen.com/subject/gwnneftx.html