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 上进行实验.
在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), ), ), ); } }