Flutter学习之旅(二)----MD风格和点击事件
Flutter中有许多常用的控件,比如下面的: 下面是一个常见页面的简单布局的完整代码: import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget{
MyAppBar({this.title});
final Widget title;
@override
Widget build(BuildContext context) {
return new Container(//矩形控件
height: 50.0,//顶部导航栏的高度
padding: const EdgeInsets.symmetric(horizontal: 10.0),//顶部导航栏与两侧的距离,horizontal表示水平方向
decoration: new BoxDecoration(color: Colors.blue[500]),//顶部导航栏颜色
child: new Row(//Row相当于LinearLayout水平布局,包括菜单按钮,标题,搜索按钮
children: <Widget>[new IconButton(icon:new Icon( Icons.menu),onPressed: null),//左上角菜单按钮,系统提供了图片,无点击事件
new Expanded(child: title),//标题文本充满整行布局
new IconButton(icon: new Icon(Icons.search),],//右上角搜索按钮,系统提供了图片,无点击事件
),);
}
}
class MyScalffold extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Material(
child: new Column(//Column相当于LinearLayout垂直布局,包括顶部标题栏和下面的内容
children: <Widget>[
new MyAppBar(title: new Text("我是标题",style: Theme.of(context).primaryTextTheme.title,),new Expanded(child: new Center(child: new Text('内容:Hello wrold'),);
}
}
void main(){//主函数入口
runApp(new MaterialApp(title: 'My app',home: new MyScalffold(),));
}
运行结果 上面代码同样界面的MD(Material Design)风格 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(//替换上面代码中的MyScaffold
appBar: new AppBar(//替换上面代码中的MyAppBar
leading: new IconButton(
icon: new Icon(Icons.menu),tooltip: 'ddd',onPressed: null,title: new Text('MD风格'),actions: <Widget>[new IconButton(icon: new Icon(Icons.search),onPressed: null)],body: new Center(child: new Text('Hello World'),floatingActionButton: new FloatingActionButton(tooltip: '增加',child: new Icon(Icons.add),);
}
}
运行结果 –手势控制 import 'package:flutter/material.dart';
void main(){
runApp(new MaterialApp(title: '手势Demo',home: new MyButton(),));
}
class MyButton extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: (){print('BUtton was tapped');},child: new Container(//Container:矩形控件,可与BoxDecoration配合来装饰 background,or a shadow,
// 可用margins,and constraints来设置其尺寸。
height: 30.0,padding: const EdgeInsets.all(8.0),margin: const EdgeInsets.symmetric(horizontal: 8.0),decoration: new BoxDecoration(borderRadius: new BorderRadius.circular(5.0),//背景的圆角
color: Colors.lightGreen[500],//背景色
child: new Center(child: new Text('Engage'),//显示 "Engage"
),);}
}
运行结果 –为了响应输入而改变控件 import 'package:flutter/material.dart';
void main() {
runApp(new Counter());
}
class Counter extends StatefulWidget{
@override
_CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter>{
int _counter=0;
void _increment(){
setState((){_counter++;});
}
@override
Widget build(BuildContext context) {
return new Row(children: <Widget>[new FloatingActionButton(onPressed: _increment,//不使用FloatingActionButton,使用RaisedButton会报错
child: new Text('增加'),new Text('Count = $_counter')],);// $_counter表示获取_counter的值
}
}
运行结果 过程中遇到的错误 刚开始使用RaisedButton时报错了,我以为是因为使用了如下的运行方式,以为Counter()不是继承自MD风格的控件 这篇文章主要介绍一些常见控件的用法等基础知识,代码写了注释,都是我个人的理解,可能有些地方表达不准确,理解不够深,这也正是我学习的目的意义。 由于工程大部分地方都相同,只有main.dart文件内容不同,只提供demo2和demo4的源码,也就是MD风格和最后的点击事件。其余的自己复制文章中的代码,然后替换掉main.dart里面的代码即可。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |