视频地址:

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的更多相关文章

  1. 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1

    第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...

  2. 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1

    20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...

  3. 20个Flutter实例视频教程-第13节: 展开闭合案例

    20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...

  4. 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1

    视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...

  5. 20个Flutter实例视频教程-第02节: 底部导航栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...

  6. 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2

    博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...

  7. 20个Flutter实例视频教程-第07节: 毛玻璃效果制作

    视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...

  8. 20个Flutter实例视频教程-第08节: 保持页面状态

    博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...

  9. 20个Flutter实例视频教程-第09节: 保持页面状态-2

    视频地址:https://www.bilibili.com/video/av39709290/?p=9 博客地址:https://jspang.com/post/flutterDemo.html#to ...

随机推荐

  1. Java、C++、Python、Ruby、PHP、C#和JavaScript的理解

    Java.C++.Python.Ruby.PHP.C#和JavaScript和日本动漫里的那些大家熟悉的动漫人物结合起来.依据他们的身世.个人经历来生动的表达各编程语言的发展历程.原文内容例如以下:  ...

  2. inline-block的使用

    inline-block是什么 inline和block是css中元素display属性的两个选项,而inline-block可以说是介于两者之间的属性值. inline使元素成为内联元素(inlin ...

  3. 最新wap手机agent

    名称 agent 铃声格式 和弦数 数据量 删除 LGE-CU8080  LGE-CU8080/1.0 UP.Browser/4.1.26l UP.Link/5.1.2.9  pmd2.0  40   ...

  4. 图像滤镜艺术---PS图层混合模式之明度模式

    本文将介绍PS图层混合模式中比較复杂 的"明度"模式的算法原理及代码实现内容. 说到PS的图层混合模式,计算公式都有,详细代码实现也能找到,可是,都没有完整介绍全部图层混合模式的代 ...

  5. EasyRTMP实现RTMP异步直播推送之环形缓冲区设计

    本文转自EasyDarwin团队kim的博客:http://blog.csdn.net/jinlong0603 EasyRTMP的推送缓冲区设计 EasyRTMP内部也同样采用的环形缓冲的设计方法,将 ...

  6. ESXi 5.5 RTL9168E网卡驱动 找到网卡

    如果你对专业服务器的价格望而却步,恰巧又想在普通的PC上安装ESXi,恰巧又是ESXi 5.5版本,那么这篇文章中提及的问题你可能会遇到,并能给你提供一些帮助. 1.成功安装重启以后提示“no boo ...

  7. Tomcat设置虚拟文件夹

    需求 在做B/S的应用时.常常会遇到一个问题,站点上传的一些图片不是保存在应用server以下.而是保存在别的文件夹,可是页面中又需要能訪问到这些图片.这时,应用server的"虚拟文件夹& ...

  8. 大数据之环境准备系列 ——第二篇 新装VMware 虚拟机 网络配置(NAT模式)

    新安装虚拟机,需要配置网络环境,才可以使用ssh客户端(如xshell)远程登录 和 虚拟机访问Internet. 一. WMware 软件配置 WMware版本号:11.0.0 build-2305 ...

  9. SURF matlab 检测函数使用

    1.这篇介绍SURF检测blob的函数. 函数/Functions 函数名称:detectSURFFeatures 功能:利用The Speeded-Up Robust Features(SURF)算 ...

  10. self = [super init]的解释

    在Object-C中我们很多时候都会重写init方法.一般情况下我们都会这样写: -(instancetype)initWithDic:(NSDictionary *)dic{ if(self=[su ...