解析开始

Flutter中一切皆widget,一切皆组件。学习Flutter中,必须首先了解Flutter的widget.先从最基本的MaterialApp和Scaffold开始了解

1 MaterialApp

一个封装了很多Android MD设计所必须要的组件的小部件,一般作为顶层widget使用。

继承关系
Inheritance
Object->Diagnosticable ->DiagnosticableTree ->Widget ->StatefulWidget ->MaterialApp

一般与以下widget一起使用
Scaffold: Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
Navigator,用于管理应用程序的页面堆栈。
MaterialPageRoute,它定义以特定于材料的方式转换的应用页面。
WidgetsApp,它定义基本的app元素但不依赖于材质库。

一般来说,在Flutter中,我们如果遵循MD设计时,顶层的Widget一般是MaterialApp,这里面我们可以指定主题样式,以便应用与APP整个页面中

2 Scaffold

Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
简单来说,Scanold就是一个提供MD设计中基本布局的widget,包括最上面的appBar,body,以及下部的drawer,snackbar等

import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyScaffold(),
));
} class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Material 是UI呈现的“一张纸”
return new Material(
// Column is 垂直方向的线性布局.
child: new Column(
children: <Widget>[
new MyAppBar(
title: new Text(
'Example title',
style: Theme.of(context).primaryTextTheme.title,
),
),
new Expanded(
child: new Center(
child: new Text('Hello, world!'),
),
),
],
),
);
}
} class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
// Widget子类中的字段往往都会定义为"final"
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[]),
// Row 是水平方向的线性布局(linear layout)
child: new Row(
//列表项的类型是 <Widget>
children: <Widget>[
new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null 会禁用 button
),
// Expanded expands its child to fill the available space.
new Expanded(
child: title,
),
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
}
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new TutorialHome(),
));
} class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Scaffold是Material中主要的布局组件.
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: new Text('Example title'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
//body占屏幕的大部分
body: new Center(
child: new Text('Hello, world!'),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
child: new Icon(Icons.add),
onPressed: null,
),
);
}
}
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new TutorialHome(),
));
} class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('应用'),
),
body: new Center(
child: new Text('Hello'),
),
);
}
}
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) { return new MaterialApp(
title: 'Flutter base UI Widget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Flutter base UI Widget'),
),
body: new ListView(
children: <Widget>[
//add code
new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
new Image.asset('images/lake.jpeg', width: 200.0,height: 200.0, fit: BoxFit.cover),
new Icon(Icons.star, color: Colors.red[])
],
),
),
);
}
}
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget titleSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text(
'Oeschinen Lake Campground',
style: new TextStyle(
fontWeight: FontWeight.bold,
),
),
),
new Text(
'Kandersteg, Switzerland',
style: new TextStyle(
color: Colors.grey[],
),
),
],
),
),
new Icon(
Icons.star,
color: Colors.red[],
),
new Text(''),
],
),
); return new MaterialApp(
title: 'Flutter base UI Widget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Flutter base UI Widget'),
),
body: new ListView(
children: <Widget>[
//add code
titleSection
],
),
),
);
}
}
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'GridView Demo'),
);
}
} class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key); final String title; @override
_MyHomePageState createState() => new _MyHomePageState();
} List<Container> _buildGridTileList(int count) {
List<Container> containers = new List<Container>.generate(
count,
(int index) =>
new Container(child: new Image.asset('images/lake.jpeg',width: 100.0,height: 100.0, fit: BoxFit.cover)));
return containers;
} Widget buildGrid() {
return new GridView.extent(
maxCrossAxisExtent: 150.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _buildGridTileList());
} class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: buildGrid(),
),
);
}
}
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
import 'package:flutter/material.dart'; void main() {
// debugPaintSizeEnabled = true;
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
} class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key); final String title; @override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//关键代码
var card = new SizedBox(
height: 210.0, //设置高度
child: new Card(
elevation: 15.0, //设置阴影
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))), //设置圆角
child: new Column( // card只能有一个widget,但这个widget内容可以包含其他的widget
children: [
new ListTile(
title: new Text('标题',
style: new TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('子标题'),
leading: new Icon(
Icons.restaurant_menu,
color: Colors.blue[],
),
),
new Divider(),
new ListTile(
title: new Text('内容一',
style: new TextStyle(fontWeight: FontWeight.w500)),
leading: new Icon(
Icons.contact_phone,
color: Colors.blue[],
),
),
new ListTile(
title: new Text('内容二'),
leading: new Icon(
Icons.contact_mail,
color: Colors.blue[],
),
),
],
),
),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
elevation: 5.0, // tabbar的阴影
),
body: Center(
child: card,
),
);
}
}

Flutter基础用法解析的更多相关文章

  1. Python3.x:bs4解析html基础用法

    Python3.x:bs4解析html基础用法 代码: import urllib.request from bs4 import BeautifulSoup import re url = r'ht ...

  2. logstash安装与基础用法

    若是搭建elk,建议先安装好elasticsearch 来自官网,版本为2.3 wget -c https://download.elastic.co/logstash/logstash/packag ...

  3. Smarty基础用法

    一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...

  4. APPcrawler基础原理解析及使用

    一.背景 一年前,我们一直在用monkey进行Android 的稳定性测试 ,主要目的就是为了测试app 是否会产生Crash,是否会有ANR,页面错误等问题,在monkey测试过程中,实现了脱离Ca ...

  5. 爬虫简介、requests 基础用法、urlretrieve()

    1. 爬虫简介 2. requests 基础用法 3. urlretrieve() 1. 爬虫简介 爬虫的定义 网络爬虫(又被称为网页蜘蛛.网络机器人),是一种按照一定的规则,自动地抓取万维网信息的程 ...

  6. PropertyGrid控件由浅入深(二):基础用法

    目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...

  7. extern "c"用法解析

    转自: extern "c"用法解析 - 简书 引言 C++保留了一部分过程式语言的特点,因而它可以定义不属于任何类的全局变量和函数.但是,C++毕竟是一种面向对象的程序设计语言, ...

  8. WordPress的have_posts()和the_post()用法解析

    原文地址:http://www.phpvar.com/archives/2316.html 网上找到一篇介绍WordPress的have_posts()和the_post()用法解析的文章,觉得不错! ...

  9. elasticsearch安装与基础用法

    来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...

随机推荐

  1. LeetCode8.字符串转整数(atoi)

    题目链接:https://leetcode-cn.com/problems/string-to-integer-atoi/ 实现 atoi,将字符串转为整数. 该函数首先根据需要丢弃任意多的空格字符, ...

  2. C#6.0中10大新特性的应用和总结

    微软发布C#6.0.VS2015等系列产品也有一段时间了,但是网上的教程却不多,这里真对C#6.0给大家做了一些示例,分享给大家.   微软于2015年7月21日发布了Visual Studio 20 ...

  3. Exception in Spark

    1: Exception in thread "main" org.apache.spark.SparkException: org.apache.spark.streaming. ...

  4. Hibarnate控制台打印不出sql,并且报出异常:org.hibernate.exception.JDBCConnectionException: Cannot open connection

    1.认真查看hibarnate.cfg.xml文件中连接数据库的各个信息是否正确;如果正确看下一步; 2.MySQL版本>=5.6.X,对应的mysql-connector-java jar 的 ...

  5. Unity shader学习之屏幕后期处理效果之Bloom效果

    Bloom特效是游戏中常见的一种屏幕效果.这种特效可以模拟真实摄像机的一种图像效果,它让画面中较亮的区域“扩散”到周围的区域中,造成一种朦胧的效果. Bloom的实现原理很简单,首先根据一个阈值提取出 ...

  6. [1]传奇3服务器源码分析一 LoginGate

    服务端下载地址: 点击这里 网上基本上都有分析该源码的分析详解,如:请点击该链接,但容易晕,而且也不全!所以才有了本文! 一.首先来看服务端的LoginGate源码 先来张图比较让人容易理解

  7. GameObject.Find与Transform.Find的区别

    1.GameObject.Find 函数原型: public static GameObject Find(string name); 说明:1.GameObject只能查找到active的物体 2. ...

  8. sitecore系列教程之目标功能有什么新意?

    由于SItecore 8中有很多令人兴奋的东西,我选择专注于体验平台的特定领域,这篇文章的主题是目标. 1.客户智能选项  目标项目(/ sitecore / system / Marketing C ...

  9. 连接远程数据库时出现 SSH: expected key exchange group packet from server / 2003 - Can't connect to MySQL server on 'XXX' (10038) / 1130 - Host 'XXX' is not allowed to connect to this MySQL server

    昨天在自己的远程服务器上玩,把系统重装了.新装了MySQL,在本地用navicat连接的时候出了几个小问题. 问题一:SSH: expected key exchange group packet f ...

  10. python 内置函数 sorted()

    sorted() 函数对所有可迭代的对象进行排序操作. sort 与 sorted 区别: sort 是应用在 list 上的方法,sorted 可以对所有可迭代的对象进行排序操作. list 的 s ...