Flutter--Hello World

2020-11-09  本文已影响0人  GaoXiaoGao

1.Flutter中万物皆Widget之

import 'package:flutter/material.dart';
///创建Main函数
void main(){

  //runApp是material提供的方法,用于启动一个应用
  //material中提供了很多可以直接使用的Widget
  //ltr: 表示从左向右
  runApp(
      Center( //Center也是继承于Widget,Center中嵌套了Text
        child:Text( //Text也继承于Widget
            "Hello World",
            textDirection: TextDirection.ltr,
            style: TextStyle(
                fontSize:36,
                color: Colors.white
            ),
        )
      )
  );
}

2.Flutter开发一般嵌套太多,对代码进行抽取如:

import 'package:flutter/material.dart';
///创建Main函数
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
       title: "MaterialApp Title",
       home:Scaffold(
           appBar: AppBar(
             title: Text("Hello Flutter"),
           ),
           body:ContentWidget()
       )
   );
  }

}

class ContentWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center( //Center也是继承于Widget,Center中嵌套了Text
        child:TextWidget()
    );
  }
}

class TextWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Text( //Text也继承于Widget
      "Hello World",
      textDirection: TextDirection.ltr,
      style: TextStyle(
          fontSize:36,
          color: Colors.black
      ),
    );
  }

}
上一篇 下一篇

猜你喜欢

热点阅读