胸闷是怎么回事,万家乐热水器,寒武纪-阳光琥珀-石头业新消息-猜石头,玩石头

频道:最近大事件 日期: 浏览:293



分析官方Demo

当咱们安装好Fultter后,咱们能够看见main.dart预置了一段代码,即官方的一个简略Demo,功用即一个简略的计数器,点击右下角的"+",对应屏幕的数字也会增加,显现作用:



Demo截图

以下为源码:import 'package:flutter/material.dart';
void main() => runApp(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: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

简略增改:

以下为main.dart :

// 导入Material UI组件库
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
// 运用程序进口,runApp功用即发动Flutter运用,接纳的参数为Widget参数
void main() => runApp(new MyApp());
// 承继一个无状况Widget组件,MyApp类代表Flutter运用
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp 设置运用称号、主题、言语、主页及路由列表等,其自身也是个Widget组件
return new MaterialApp(
// 运用称号
title: 'Flutter Demos',
// 运用主题
theme: new ThemeData(
// 蓝色主题
primarySwatch: Colors.blue,
),
// 运用命名路由办理route,首要注册路由表
routes: {
"new_page": (context) => NewRoute(),
},
// 运用主页路由
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// 即承继一个有状况Widget组件
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
// 对应该类的状况类
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State {
// “+” 次数记载
int _counter = 0;
// 设置状况的自增函数
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
// 构建UI界面的逻辑build办法
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
// 泛型Widget,即承受Widget组件类型构建列表
children: [
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
new Text('''显现文字
能够多行
书写
'''),
// 增加一个按钮组件,用于跳转新路由(新页面)
FlatButton(
child: Text('open new route'),
textColor: Colors.blue,
// 导航至新路由
onPressed: () {
// 推至路由栈,路由办理Widget组件,经过栈来办理一个路由widget调集 即先进先出办理准则,这样好了解多了
// Navigator.push(context,
// new MaterialPageRoute(builder: (context){
// return new NewRoute();
// // 经过路由称号也能够翻开新的路由页
// },
// )
// );
Navigator.pushNamed(context, "new_page");
}),
// 跳转至新路由的按钮
FlatButton(
child: Text('open new counter'),
textColor: Colors.blue,
onPressed: () => Navigator.pushNamed(context, "new_page"),
),
// 经过english_words包随机显现一个英文单词
new RandomWordsWidget(),
// 打印文字的组件
Echo(
text: "接纳输入文字并回显",
)
],
),
),
// 右下角的按钮
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
// 依据路由办理,测验新的页面构建:
class NewRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: Text('This is new route.')),
body: Center(child: Text('nice route.')));
}
}
class RandomWordsWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new Padding(
padding: const EdgeInsets.all(8.0),
child: new Text(wordPair.toString()));
}
}
class Echo extends StatelessWidget {
const Echo({
Key key,
@required this.text,
this.backgroundColor: Colors.grey,
}) : super(key: key);
final String text;
final Color backgroundColor;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: backgroundColor,
child: Text(text),
));
}
}

以下是代码运转后的成果:

主页:



截图

新路由:



新路由截图

为了尽可能多的获取很多接连的学习时刻,笔者只能尽可能将每天的创造内容放到学习中,即边学习边“创造”,把尽可能多的收成注释到学习代码中粗俗共享。

热门
最新
推荐
标签