先放效果,瞎写一通,不过我发现自己挺享受自己创作设计的过程的,真的废寝忘食hhh
贴代码
//main.dart
import 'package:flutter/material.dart';
import 'package:my_firstapp/Stateful.dart';
import 'package:my_firstapp/pageview.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'roadkiller',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter的路由与导航小试牛刀'),
),
body: RouteNavigator(),
),
routes: <String, WidgetBuilder>{//这里提供了一个路由
'主页': (BuildContext context) => StatefulGroup(), //冒号左边的是routeName
// '副页': (BuildContext context) => ListPage(),
'广告栏': (BuildContext context) => Pageview(),//越看越像匿名类组件
},
);
}
}
class RouteNavigator extends StatefulWidget {
@override
_RouteNavigatorState createState() => _RouteNavigatorState();
}
class _RouteNavigatorState extends State<RouteNavigator> {
bool byName = false;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
SwitchListTile(//这个是平常我们所见到的开关按钮
title: Text('${byName ? '' : '不'}通过路由名跳转'),//三目运算符大家还记得吧
value: byName,
onChanged: (value) {//传进去value
setState(() {//和之前底部导航栏基本一样的操作
byName = value;
});
},
),
_item('我的主页', StatefulGroup(), '主页'),
// _item('我的副页', ListPage(), '副页'),
_item('我的广告栏', Pageview(), '广告栏'),
],
),
);
}
_item(String title, page, String routeName) {//最后一个参数是路由名,用户可以通过路由名来进行跳转页面
return Container(
child: RaisedButton(
onPressed: () {
if (byName) {
Navigator.pushNamed(context, routeName);
} else {
Navigator.push(
context, MaterialPageRoute(builder: (context) => page));
}
},
child: Text(title),
),
);
}
}
//StatefulGroup.dart
import 'package:flutter/material.dart';
class StatefulGroup extends StatefulWidget {
@override
_StatefulGroupState createState() => _StatefulGroupState();
}
class _StatefulGroupState extends State<StatefulGroup> {
int _currentindex = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'roadkiller',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Waiting her...'),
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back),
),
),
body: _currentindex == 0
? RefreshIndicator(
child: ListView(
children: <Widget>[
HomePage(),
],
),
onRefresh: _handleRefresh)
: ListPage(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentindex,
onTap: (index) {
//这里的index是系统自动根据底部导航栏的位置来确定的,手指点到第一个图标就是0,点到第二个就是1
setState(() {
_currentindex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text('首页'),
icon: Icon(
Icons.home,
color: Colors.grey,
),
activeIcon: Icon(
Icons.home,
color: Colors.blue,
),
),
BottomNavigationBarItem(
title: Text('菜单'),
icon: Icon(
Icons.list,
color: Colors.grey,
),
activeIcon: Icon(
Icons.list,
color: Colors.blue,
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: null,
child: Text('点我'),
),
),
);
}
Future<Null> _handleRefresh() async {
await Future.delayed(Duration(milliseconds: 200));
return null;
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(20),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(40)),
child: Opacity(
opacity: 0.6,
child: Image.network('http://www.devio.org/img/avatar.png'),
),
),
),
ClipOval(
child: SizedBox(
width: 160.0,
height: 160.0,
child: Image.network(
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1352807053,3315013341&fm=26&gp=0.jpg'),
),
),
],
),
Text(
'求爆照(*^▽^*)',
style: TextStyle(
fontSize: 20.0,
),
),
Icon(
Icons.add_a_photo,
size: 50.0,
color: Colors.lightBlue,
),
Text('告诉我你的位置呗',style: TextStyle(fontSize: 20.0),),
Chip(
avatar: Icon(Icons.add_location),
label: Text('你家哪滴'),
),
Card(
child: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
AlertDialog(
title: Text('人心中的成见像一座大山'),
content: Text('任你怎么努力都休想搬动'),
),
// Text('有什么不开心的说出来就好了 ☟',style: TextStyle(fontSize: 20.0,color: Colors.lightBlue[600]),),
Card(
color: Colors.pinkAccent[100],
elevation: 8,
margin: EdgeInsets.only(bottom: 30.0),
child: Container(
padding: EdgeInsets.all(10),
child: Text(
'做自己真的越来越难了',
style: TextStyle(fontSize: 20.0),
),
),
),
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
hintText: '烦恼说出来通通忘掉!',
hintMaxLines: 1,
hintStyle: TextStyle(fontSize: 20.0),
),
),
],
),
),
),
Container(
height: 100,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(color: Colors.transparent),
child: PhysicalModel(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(20)),
clipBehavior: Clip.hardEdge, //抗锯齿
child: PageView(
children: <Widget>[
_item('心碎了一地', Colors.blueAccent),
_item('捡不回', Colors.amber),
_item('从前的心跳', Colors.pinkAccent),
Image.network('http://www.devio.org/img/avatar.png'),
],
),
),
),
],
),
decoration: BoxDecoration(color: Colors.white),
);
}
_item(String content, Color color) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(color: color),
child: Text(
content,
style: TextStyle(fontSize: 20.0, color: Colors.white),
),
);
}
}
class ListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
FractionallySizedBox(
widthFactor: 1,
child: Container(
height: 30.0,
decoration: BoxDecoration(color: Colors.greenAccent),
child: Center(
child: Text(
'You still have lots more to work on.',
style: TextStyle(fontSize: 18.0),
),
),
),
),
Wrap(
//Wrap布局会从左到右进行排列,并且自动换行
spacing: 15, //水平间距
runSpacing: 10, //竖直间距
children: <Widget>[
_chip('C语言'),
_chip('C++'),
_chip('Java'),
_chip('Python'),
_chip('HTML'),
_chip('CSS'),
_chip('JavaScript'),
_chip('Dart'),
_chip('Flutter'), //个人大一自学的一些语言
],
)
],
);
}
_chip(String s) {
return Chip(
label: Text(s),
avatar: CircleAvatar(
backgroundColor: Colors.blue[700],
child: Text(
s.substring(0, 1),
style: TextStyle(fontSize: 10),
),
),
);
}
}
//pageview.dart
import 'package:flutter/material.dart';
class Pageview extends StatefulWidget {
@override
_PageviewState createState() => _PageviewState();
}
class _PageviewState extends State<Pageview> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'roadkiller',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('广告时间到!别急着走啊!Ծ‸Ծ'),
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back),
),
),
body: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
height: 100.0,
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(color: Colors.pinkAccent),
child: PageView(
children: <Widget>[
_item('GIANT自行车牛逼!', Colors.lightBlueAccent),
_item('音格格手卷钢琴个人认为手感奇差', Colors.pinkAccent),
_item('博文视点的技术书籍真的不错', Colors.amber),
],
),
)
],
),
),
),
);
}
_item(String content, Color color) {
return Container(
decoration: BoxDecoration(color: color),
child: Center(
child: Text(
content,
style: TextStyle(fontSize: 20.0, color: Colors.white),
),
),
);
}
}
csdn都没有flutter的语法高亮。。。