Flutter基础—第一个Flutter实例
学习Flutter的第一个实例: import 'package:flutter/material.dart';
void main() {
runApp(new Center(child: new Text('你好,世界!',textDirection: TextDirection.ltr)));
}
上面实例中只使用了runApp函数,runApp函数接受指定的控件(Widget),并使其作为控件树(widget tree)的根控件。控件(Widget)定义一个元素(Element)的配置,在Flutter框架的层次结构中处于核心层。本实例中,控件树(widget tree)包含两个控件,Center控件使其子控件处于中间位置,Text控件打印文本内容。runApp函数强制将根控件覆盖屏幕,这意味着文本“你好,世界!”将显示在屏幕中心。 在写应用程序时,经常会使用StatelessWidget和StatefulWidget编写新控件,两者的差别在于你是否要管理控件的状态。一个控件的主要任务是实现build函数,定义控件中其他较低层次的控件。build函数将依次构建这些控件,直到底层渲染对象。 基本控件
结合基本控件与其他控件的实例: import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
final Widget title;
@override
Widget build(BuildContext context) {
return new Container(
height: 56.0,padding: const EdgeInsets.symmetric(horizontal: 8.0),decoration: new BoxDecoration(color: Colors.blue[500]),child: new Row(
children: <Widget>[
new IconButton(
icon: new Icon(Icons.menu),tooltip: '导航菜单',onPressed: null,),new Expanded(
child: title,new IconButton(
icon: new Icon(Icons.search),tooltip: '搜索',],);
}
}
class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Material(
child: new Column(
children: <Widget>[
new MyAppBar(
title: new Text('实例标题',style: Theme.of(context).primaryTextTheme.title),new Expanded(
child: new Center(
child: new Text('你好,世界!'),);
}
}
void main() {
runApp(new MaterialApp(
title: '我的应用',home: new MyScaffold(),));
}
执行前确认flutter.yaml文件内有“uses-material-design: true”,允许使用预定的Material icons。 name: myapp
uses-material-design: true
许多控件为了继承主题数据,需要MaterialApp才能正常显示,因此,运行一个MaterialApp应用。 MyAppBar控件创建了一个Container(容器),高度为56设备无关像素(device-independent pixels),内部左右填充8像素(pixels)。在容器内部,MyAppBar为子控件设置Row(水平)布局,中间的title控件被设置成Expanded,Expanded的作用是展开Row、Column和Flex的子控件,意味它可以使用剩余的所有空间。 MyScaffold控件为子控件设置垂直布局,在垂直顶部放置一个MyAppBar的实例,将MyAppBar的Text控件作为标题使用,将控件作为参数传递给其他控件非常方便实用的,你可以创建通用的控件,以各种方式重复的使用。最后,MyScaffold使用Expanded,用一个中心文本来填充剩余的空间。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |