Flutter基础—第一个Flutter实例

概述学习Flutter的第一个实例： import 'package:flutter/material.dart';void main() { runApp(new Center(child: new Text('你好，世界！', textDirection: TextDirection.ltr)));} 上面实例中只使用了runApp函数，runApp函数接受指定的控件(Widget)，并使

学习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函数将依次构建这些控件，直到底层渲染对象。

基本控件

Text：文本控件，在应用中创建各种样式的文本。

Row,Column：Flex控件，可以创建水平(Row)或垂直(Column)方向的布局，是基于Web的flexBox的布局模式设计的。

Stack：非线性布局（水平或垂直），控件可以堆叠在其他控件上，可以使用positioned控件控制Stack相对顶部、右部、底部和左部的位置，是基于Web的absolute定位的布局模式。

Container：创建矩形的可视元素，可以用Boxdecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制，另外，还可以在三维空间利用矩阵进行变换。

结合基本控件与其他控件的实例：

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: myappuses-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，用一个中心文本来填充剩余的空间。

总结

以上是内存溢出为你收集整理的Flutter基础—第一个Flutter实例全部内容，希望文章能够帮你解决Flutter基础—第一个Flutter实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。