20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2
视频地址:
https://www.bilibili.com/video/av39709290/?p=4
博客地址:
https://jspang.com/post/flutterDemo.html#toc-7d1
学习如果使用一个动态的widget代替之前写的那几个静态的widget
新建文件:each_view.dart
快捷键:stful生成动态的widget
定义内部使用的变量:以下划线开头的
String _title;这个title是从上一个页面传过来的
我们在构造函数内初始化一下
下面我们依然return Scaffold脚手架
bottom_appBar_demo.dart引入我们的Each_View.dart
做一个数组,和索引。
用数组来变换我们页面里面的样式
有了变量以后,我们需要初始化一下,重写我们的初始化状态方法initState()
点击中间的按钮的时候增加响应事件:
这里用我们的路由的方式
Navigator.of(context)
of里面是我们的上下文
然后用push。push里面就是我们的Material路由了,然后里面是构造器build。这里也是调用我们动态的页面EachView
预览下效果
点击后就跳转了我们的EachView传递了的参数New Page
两边的两个按钮点击的时候 我们不是直接跳转到EachVIew页面。而是在中间页面去动态的切换。我们只需要变化的它的状态就是它的State就可以了
然后设置我们脚手架的body为内置的_eachView数组内根据索引显示的widget组件
预览页面,如果出错了 需要重新flutter run一下。看视屏的评论说用大写R也可以。
R是大更新,r是小更新
我用大写的R更新了下 貌似还真可以!!
代码
import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.lightBlue,//里面定义了很多的主题,这里使用亮蓝色
),
home:BottomAppBarDemo()
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'each_view.dart'; class BottomAppBarDemo extends StatefulWidget {
final Widget child; BottomAppBarDemo({Key key, this.child}) : super(key: key); _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
} class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView;
int _index=;
@override
void initState(){
_eachView=List();
_eachView
..add(EachView('Home'))
..add(EachView('WJW'));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _eachView[_index],
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
return EachView('New Page');
}));
},
tooltip: 'WJW',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: Colors.white,
onPressed: (){
setState(() {
_index=;
});
},
),
IconButton(
icon: Icon(Icons.alarm_on),
color: Colors.white,
onPressed: (){
setState(() {
_index=;
});
},
)
],
),
),
);
}
}
bottom_appBar_demo.dart
import 'package:flutter/material.dart'; class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState createState() => _EachViewState();
} class _EachViewState extends State<EachView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget._title),),
body: Center(child: Text(widget._title),),
);
}
}
each_view.dart
20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2的更多相关文章
- 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1
第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...
- 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1
20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...
- 20个Flutter实例视频教程-第13节: 展开闭合案例
20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...
- 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1
视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第02节: 底部导航栏制作-2
视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...
- 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...
- 20个Flutter实例视频教程-第07节: 毛玻璃效果制作
视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第08节: 保持页面状态
博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...
- 20个Flutter实例视频教程-第09节: 保持页面状态-2
视频地址:https://www.bilibili.com/video/av39709290/?p=9 博客地址:https://jspang.com/post/flutterDemo.html#to ...
随机推荐
- Java、C++、Python、Ruby、PHP、C#和JavaScript的理解
Java.C++.Python.Ruby.PHP.C#和JavaScript和日本动漫里的那些大家熟悉的动漫人物结合起来.依据他们的身世.个人经历来生动的表达各编程语言的发展历程.原文内容例如以下: ...
- inline-block的使用
inline-block是什么 inline和block是css中元素display属性的两个选项,而inline-block可以说是介于两者之间的属性值. inline使元素成为内联元素(inlin ...
- 最新wap手机agent
名称 agent 铃声格式 和弦数 数据量 删除 LGE-CU8080 LGE-CU8080/1.0 UP.Browser/4.1.26l UP.Link/5.1.2.9 pmd2.0 40 ...
- 图像滤镜艺术---PS图层混合模式之明度模式
本文将介绍PS图层混合模式中比較复杂 的"明度"模式的算法原理及代码实现内容. 说到PS的图层混合模式,计算公式都有,详细代码实现也能找到,可是,都没有完整介绍全部图层混合模式的代 ...
- EasyRTMP实现RTMP异步直播推送之环形缓冲区设计
本文转自EasyDarwin团队kim的博客:http://blog.csdn.net/jinlong0603 EasyRTMP的推送缓冲区设计 EasyRTMP内部也同样采用的环形缓冲的设计方法,将 ...
- ESXi 5.5 RTL9168E网卡驱动 找到网卡
如果你对专业服务器的价格望而却步,恰巧又想在普通的PC上安装ESXi,恰巧又是ESXi 5.5版本,那么这篇文章中提及的问题你可能会遇到,并能给你提供一些帮助. 1.成功安装重启以后提示“no boo ...
- Tomcat设置虚拟文件夹
需求 在做B/S的应用时.常常会遇到一个问题,站点上传的一些图片不是保存在应用server以下.而是保存在别的文件夹,可是页面中又需要能訪问到这些图片.这时,应用server的"虚拟文件夹& ...
- 大数据之环境准备系列 ——第二篇 新装VMware 虚拟机 网络配置(NAT模式)
新安装虚拟机,需要配置网络环境,才可以使用ssh客户端(如xshell)远程登录 和 虚拟机访问Internet. 一. WMware 软件配置 WMware版本号:11.0.0 build-2305 ...
- SURF matlab 检测函数使用
1.这篇介绍SURF检测blob的函数. 函数/Functions 函数名称:detectSURFFeatures 功能:利用The Speeded-Up Robust Features(SURF)算 ...
- self = [super init]的解释
在Object-C中我们很多时候都会重写init方法.一般情况下我们都会这样写: -(instancetype)initWithDic:(NSDictionary *)dic{ if(self=[su ...