文章目录
VS Code:Flutter 代码片断
安装Awesome Flutter Snippets,可以用代码片段快速书写代码。
打开新页面并返回(push 与 pop)
import 'package:flutter/material.dart';
class NavigatorDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
onPressed: null,
child: Text('Home'),
),
FlatButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => Page(title: 'About')),
);
},
child: Text('About'),
),
],
),
),
);
}
}
class Page extends StatelessWidget {
final String title;
Page({this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
elevation: 0.0,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
);
}
}
带名字的路由( Navigator.pushNamed)
'/about’的/表示路由的根或者初始路由,就是默认要显示的东西。
main.dart
import 'package:flutter/material.dart';
import 'demo/listview_demo.dart';
import 'demo/drawer_demo.dart';
import 'demo/bottom_navigation_bar.dart';
import 'demo/base_demo.dart';
import 'demo/layout_demo.dart';
import 'demo/view_demo.dart';
import './demo/sliver_demo.dart';
import 'demo/navigator_demo.dart';
void main(List<String> args) {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
//home: Home(), //Home()自定义的
home: NavigatorDemo(),
routes: {
'/about': (context) => MyPage(title: 'About'),
},
theme: ThemeData(
primarySwatch: Colors.yellow, //主题颜色
highlightColor: Color.fromRGBO(255, 255, 255, 0.5), //白色,不透明度是0.5
splashColor: Colors.white70 //水波纹不透明度是70的白色
));
}
}
Navigator_demo.dart
import 'package:flutter/material.dart';
class NavigatorDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
onPressed: null,
child: Text('Home'),
),
FlatButton(
child: Text('About'),
onPressed: () {
/*Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => MyPage(title: 'About')),
);*/
Navigator.pushNamed(context, '/about');///
},
),
],
),
),
);
}
}
class MyPage extends StatelessWidget {
final String title;
MyPage({this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
elevation: 0.0,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
);
}
}
初始路由:initialRoute
initialRoute: ‘/about’, //初始路由就是about的页面
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
//home: Home(), //Home()自定义的
//home: NavigatorDemo(),
initialRoute: '/',//初始路由
routes: {
'/': (context) => NavigatorDemo(),//初始路由
'/about': (context) => MyPage(title: 'About'),
},
theme: ThemeData(
primarySwatch: Colors.yellow, //主题颜色
highlightColor: Color.fromRGBO(255, 255, 255, 0.5), //白色,不透明度是0.5
splashColor: Colors.white70 //水波纹不透明度是70的白色
));
}
}
InkWell:添加溅墨动画效果
import 'package:flutter/material.dart';
import '../model/post.dart';
class ListViewDemo extends StatelessWidget {
//自定义一个函数
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.red,
margin: EdgeInsets.all(20.0), //外边距
child: Stack(
children: [
Column(
children: [
AspectRatio(
//把图像放到AspectRatio里设置比例
aspectRatio: 16 / 9,
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
),
SizedBox(height: 16.0), //SizedBox留点空间,height高度
Text(
posts[index].title,
style: Theme.of(context).textTheme.headline6, //设置文字的样式
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subtitle1,
),
SizedBox(
height: 16.0,
),
],
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
//溅墨
splashColor: Colors.white.withOpacity(0.3),
highlightColor: Colors.white.withOpacity(0.1),
onTap: () {
debugPrint('Tap');
},
),
))
],
)
/*Column(//竖着排列的,所以用Column小部件
children:<Widget>[
Image.network(posts[index].imageUrl),
SizedBox(height:16.0),//SizedBox留点空间,height高度
Text(
posts[index].title,
style: Theme.of(context).textTheme.headline6,//设置文字的样式
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subtitle1,
)
]),*/
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
);
}
}
在内容详情页上显示内容
内容详情页post_show.dart
import 'package:flutter/material.dart';
import '../model/post.dart';
class PostShow extends StatelessWidget {
final Post post;
PostShow({
@required this.post,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('${post.title}'),
elevation: 0.0,
),
body: Column(
children: [
Image.network(post.imageUrl),
Container(
padding: EdgeInsets.all(32.0),
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('${post.title}',
style: Theme.of(context).textTheme.bodyText1),
SizedBox(
height: 32.0,
),
Text('${post.author}',
style: Theme.of(context).textTheme.bodyText2),
],
),
)
],
),
);
}
}
listview_demo.dart
import 'package:flutter/material.dart';
import '../model/post.dart';
import './post_show.dart';
class ListViewDemo extends StatelessWidget {
//自定义一个函数
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.red,
margin: EdgeInsets.all(20.0), //外边距
child: Stack(
children: [
Column(
children: [
AspectRatio(
//把图像放到AspectRatio里设置比例
aspectRatio: 16 / 9,
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
),
SizedBox(height: 16.0), //SizedBox留点空间,height高度
Text(
posts[index].title,
style: Theme.of(context).textTheme.headline6, //设置文字的样式
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subtitle1,
),
SizedBox(
height: 16.0,
),
],
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
//溅墨
splashColor: Colors.white.withOpacity(0.3),
highlightColor: Colors.white.withOpacity(0.1),
onTap: () {
//debugPrint('Tap');
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PostShow(post: posts[index])));
},
),
))
],
)
/*Column(//竖着排列的,所以用Column小部件
children:<Widget>[
Image.network(posts[index].imageUrl),
SizedBox(height:16.0),//SizedBox留点空间,height高度
Text(
posts[index].title,
style: Theme.of(context).textTheme.headline6,//设置文字的样式
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subtitle1,
)
]),*/
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
);
}
}