Flutter 学习笔记

Flutter: 是基本对象编程的:

　　一切都是Widget, 基本APP本身也是Widget.

　　创建一个Widget并添加到 layout Widget.

　　将一个layout Widget 添加到 APP Widget, 就可以显示在设备上.

　　最简单的是使用脚手架Scaffold, Scaffold是 Material 的一个组件库, 它提供了一个默认的 banner, background color, API for adding drawers, snack bars 和 bottom sheets.

　　如果你愿意, 你可以仅仅使用Widget库中标准的Widgets构建一个APP.

只需要简单的几步, 你就可以在屏幕显示出 text, icon, image 等.

　　1. 选择一个 layout Widget 对象, 如果 Center, Container

　　2. 创建一个可视的Widget

　　注意: 所以的Flutter App都是用 Dart 语言写的. 如果你了解 Java 和 Object-oriented C语言, 你会对Dart感觉熟悉. 如果不, 你可以工具在 DartPad 上进行实验.

扫描二维码关注公众号，回复： 4772548 查看本文章

在Language Tour 上了解Dart语言的特性.

// Text Widget
Text('Hello World', style: TextStyle(fontSize: 32.0));

// Image Widget
Image.asset('images/lake.jpg', fit: BoxFit: cover);

// Icon Widget
Icon(Iocns.star, color: Colors.red[500]);

　　3. 添加一个可视的 Widget 到 layout widget

　　所有的 layout widget的有一个 child 属性, 用于单个widget(如: Center 或 Container), 或 childrend 属性, 用于一个 widget 列表(如: Row, Column, ListView, Stack)

　　将 Text Widget 添加到 Center Widget

Center(
    child: Text('Hello World', style: TextStyle(fontSize: 32.0))
)

　　4. 将 layout widget 添加到 page

　　Fluuter app , widget 和大部分 widgets 都有一个 build() 方法. 在build方法里声明widget显示在设备上.

　　在 Materail app 中, 你可以把 Center widget 添加 body 属性上.

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context){
        retrun Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
            ),
            body: Center(
                child: Text('Hello World', style: TextStyle(fontSize: 32.0)),
            ),
        );
    }
}

　　注意: Materail 组件库实现自 Materail Design principles. 你可以使用标准的 widgets 库或者使用 Material 组件库. 也可以混合使用这两个库. 你可以定做已经存在 widgets,

也可以创建自己的 widgets.

　　一个非 Materail app.

// This app doesn't use any Materail Components, such as Scaffold.
// Normally, an app that doesn't use Scaffold has a black background
// and the default text color is blacn. This app changes its background 
// to white and its text color to dark grey to mimic a Materail app.

import 'package:flutter/materail.dart';

var main() {
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return Container(
            decoration: BoxDecoration(color: Colors.white),
            child: Center(
                child: Text(
                    textDirection: TextDirection.ltr,
                    style: TextStyle(fontSize: 40.0, color: Colors.black87),
                ),
            ),
        );
    }
}

猜你喜欢