开发笔记:Flutter入门顶部导航+侧边栏+按钮

作者： | 来源：互联网 | 2023-09-12 12:34

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Flutter入门--顶部导航+侧边栏+按钮相关的知识，希望对你有一定的参考价值。

* TabBar（顶部导航）

import ‘package:flutter/material.dart‘;
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
@override
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 8,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black12,
title: Row(
children: [
Expanded(
child: TabBar(
indicatorColor: Colors.red,
labelColor: Colors.black,
unselectedLabelColor: Colors.white,
isScrollable: true,
tabs: [
Tab(text: "热销"),
Tab(text: "推荐"),
Tab(text: "社群"),
Tab(text: "推广"),
Tab(text: "新闻"),
Tab(text: "热点"),
Tab(text: "淘宝"),
Tab(text: "知乎"),
],
),
)
],
),
),
body: TabBarView(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("跳转到表单页面并传值"),
onPressed: () {
//普通路由的写法
// Navigator.of(context)
// .push(MaterialPageRoute(builder: (context) => FormPage(title: "我是跳转传值",)));
//命名路由的写法
Navigator.pushNamed(context, ‘/form‘);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
],
),
Text("第三个tab"),
Text("第四个tab"),
Text("第五个tab"),
Text("第六个tab"),
Text("第七个tab"),
Text("第八个tab"),
Text("第九个tab"),
],
),
),
);
}
}

效果图：

技术图片

* 自定义TabController（上面的是默认TabController）

自定义的好处是可以在addListener中增加监听，通过setState修改状态

import ‘package:flutter/material.dart‘;
class TabBarControllerPage extends StatefulWidget {
TabBarControllerPage({Key key}) : super(key: key);
@override
_TabBarControllerPageState createState() => _TabBarControllerPageState();
}
class _TabBarControllerPageState extends State
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
void initState() {
super.initState();
_tabController = new TabController(
vsync: this,
length: 2,
);
_tabController.addListener(() {
print(_tabController.index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TabBarControllerPage"),
bottom: TabBar(
controller: this._tabController,
tabs: [
Tab(text: "热销"),
Tab(text: "推荐"),
],
),
),
body: TabBarView(
controller: this._tabController,
children: [
Center(child: Text("热销")),
Center(child: Text("推荐")),
],
),
);
}
}

* Drawer（侧边栏）

import ‘package:flutter/material.dart‘;
import ‘tabs/Home.dart‘;
import ‘tabs/Category.dart‘;
import ‘tabs/Setting.dart‘;
class Tabs extends StatefulWidget {
final int index;
Tabs({Key key, this.index = 0}) : super(key: key);
@override
_TabsState createState() => _TabsState(index);
}
class _TabsState extends State {
int _currentIndex;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [HomePage(), CategoryPage(), SettingPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Demo‘),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
// type: BottomNavigationBarType.fixed,//可以配置超过4个以上的icon
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页"),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类"),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置"),
),
],
),
//左侧边栏
drawer: Drawer(
child: Column(
children: [
//头部
Row(
children: [
Expanded(
child: DrawerHeader(
child: Text("你好Flutter"),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
fit: BoxFit.cover)),
),
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("用户中心"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("设置中心"),
),
Divider(),
],
),
),
//右侧边栏
endDrawer: Drawer(
child: Text("右侧侧边栏"),
),
);
}
}

效果图

技术图片

* UserAccountsDrawerHeader （用户信息侧边栏）

import ‘package:flutter/material.dart‘;
import ‘tabs/Home.dart‘;
import ‘tabs/Category.dart‘;
import ‘tabs/Setting.dart‘;
class Tabs extends StatefulWidget {
final int index;
Tabs({Key key, this.index = 0}) : super(key: key);
@override
_TabsState createState() => _TabsState(index);
}
class _TabsState extends State {
int _currentIndex;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [HomePage(), CategoryPage(), SettingPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Demo‘),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
// type: BottomNavigationBarType.fixed,//可以配置超过4个以上的icon
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页"),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类"),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置"),
),
],
),
//左侧边栏
drawer: Drawer(
child: Column(
children: [
//头部
Row(
children: [
Expanded(
child: UserAccountsDrawerHeader(
accountName: Text("用户King"),
accountEmail: Text("xxxxx.@qq.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png"),
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
fit: BoxFit.cover),
),
otherAccountsPictures: [
Image.network(
"https://www.itying.com/images/flutter/4.png"),
Image.network(
"https://www.itying.com/images/flutter/5.png"),
],
),
)
],
),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.home),
),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("用户中心"),
onTap: () {
Navigator.of(context).pop(); //隐藏侧边栏
Navigator.pushNamed(context, ‘/user‘);
},
),
Divider(),
ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("设置中心"),
),
Divider(),
],
),
),
//右侧边栏
endDrawer: Drawer(
child: Text("右侧侧边栏"),
),
);
}
}

效果图

技术图片

* 各种按钮

import ‘package:flutter/material.dart‘;
class ButtonPage extends StatelessWidget {
const ButtonPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("按钮页面"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("普通按钮"),
onPressed: () {
print("普通按钮");
},
),
SizedBox(width: 10),
RaisedButton(
child: Text("有颜色按钮"),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("有颜色按钮");
},
),
SizedBox(width: 10),
RaisedButton(
child: Text("有阴影按钮"),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("有阴影按钮");
},
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text("图标按钮"),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("按钮图标");
},
),
SizedBox(width: 10),
RaisedButton(
child: Text("圆角按钮"),
color: Colors.blue,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onPressed: () {
print("圆角按钮");
},
),
SizedBox(width: 10),
Container(
height: 80,
child: RaisedButton(
child: Text("圆型按钮"),
color: Colors.blue,
textColor: Colors.white,
splashColor: Colors.yellow,
shape: CircleBorder(
side: BorderSide(
color: Colors.white,
)),
onPressed: () {
print("圆型按钮");
},
),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 300,
height: 50,
child: RaisedButton(
child: Text("宽度按钮"),
color: Colors.blue,
textColor: Colors.white,
splashColor: Colors.yellow,
onPressed: () {
print("宽度按钮");
},
),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
height: 50,
margin: EdgeInsets.all(10),
child: RaisedButton(
child: Text("自适应屏幕宽度按钮"),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("自适应屏幕宽度按钮");
},
),
),
)
],
),
SizedBox(height: 10),
FlatButton(
child: Text("flatbutton"),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {
print("flatbutton");
},
),
SizedBox(height: 10),
//无背景色效果
OutlineButton(
child: Text("OutlineButton"),
color: Colors.blue, //没有效果
textColor: Colors.blue,
onPressed: () {
print("OutlineButton");
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//按钮组
ButtonBar(
children: [
RaisedButton(
child: Text("按钮1"),
onPressed: () {
print("按钮1");
},
),
RaisedButton(
child: Text("按钮2"),
onPressed: () {
print("按钮2");
},
),
MyButton(
text: "自定义按钮",
pressed: () {
print("自定义按钮");
},
)
],
)
],
)
],
),
);
}
}
//自定义按钮组件
class MyButton extends StatelessWidget {
final text;
final pressed;
const MyButton({this.text = ‘‘, this.pressed = null});
@override
Widget build(BuildContext context) {
return Container(
height: 50,
width: 120,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}

效果图

技术图片

* 类似闲鱼app底部导航

import ‘package:flutter/material.dart‘;
import ‘tabs/Home.dart‘;
import ‘tabs/Category.dart‘;
import ‘tabs/Setting.dart‘;
class Tabs2 extends StatefulWidget {
final index;
Tabs2({Key key, this.index = 0}) : super(key: key);
_TabsState createState() => _TabsState(this.index);
}
class _TabsState extends State {
int _currentIndex;
_TabsState(index) {
this._currentIndex = index;
}
List _pageList = [
HomePage(),
CategoryPage(),
SettingPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
floatingActionButton: Container(
height: 80,
width: 80,
padding: EdgeInsets.all(8),
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.white,
),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
//改变状态
this._currentIndex = 2;
});
},
backgroundColor: this._currentIndex == 2 ? Colors.red : Colors.yellow,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex, //配置对应的索引值选中
onTap: (int index) {
setState(() {
//改变状态
this._currentIndex = index;
});
},
iconSize: 36.0, //icon的大小
fixedColor: Colors.red, //选中的颜色
type: BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(icon: Icon(Icons.message), title: Text("消息")),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置")),
BottomNavigationBarItem(icon: Icon(Icons.card_giftcard), title: Text("分享"))
],
),
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
child: UserAccountsDrawerHeader(
accountName: Text("大地老师"),
accountEmail: Text("dadi@itying.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png"),
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
fit: BoxFit.cover,
)),
otherAccountsPictures: [
Image.network(
"https://www.itying.com/images/flutter/4.png"),
Image.network(
"https://www.itying.com/images/flutter/5.png"),
],
))
],
),
ListTile(
leading: CircleAvatar(child: Icon(Icons.home)),
title: Text("我的空间"),
),
Divider(),
ListTile(
leading: CircleAvatar(child: Icon(Icons.people)),
title: Text("用户中心"),
onTap: () {
Navigator.of(context).pop(); //隐藏侧边栏
Navigator.pushNamed(context, ‘/user‘);
},
),
Divider(),
ListTile(
leading: CircleAvatar(child: Icon(Icons.settings)),
title: Text("设置中心"),
),
Divider(),
],
),
),
endDrawer: Drawer(
child: Text(‘右侧侧边栏‘),
),
);
}
}

效果图

技术图片

欢迎关注我的微信公众号：安卓圈

技术图片

推荐阅读

text
记录一些 Latex 的技巧

Latex一些技巧：1.如何创建不浮动的的figure和table\makeatletter\newcommand{\figcaption}{\def\captyp ... [详细]

蜡笔小新 2023-10-14 16:07:32
text
使用Flutter新的integration_test进行示例集成测试？

使用Flutternewintegration_test进行示例集成测试？回答首先在dev下的p ... [详细]

蜡笔小新 2023-10-17 13:40:53
python
python创建一个窗口_等一个大佬啊要求用python创建一个窗口，窗口按钮功能是创建一个球体或立方体。明天上课之前交给我...

展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]

蜡笔小新 2023-12-13 16:26:09
python
人脸检测 pyqt+opencv+dlib

一、实验目标绘制PyQT界面，调用摄像头显示人脸信息。在界面中，用户通过点击不同的按键可以实现多种功能：打开和关闭摄像头， ... [详细]

蜡笔小新 2023-10-17 12:37:18
python
基于TensorFlow的Keras高级API实现手写体数字识别

前言这个项目的话我也是偶然在B站看到一个阿婆主（SvePana）在讲解这个，跟着他的视频敲的代码并学习起来的。并写在自己这里做个笔记也为 ... [详细]

蜡笔小新 2023-10-15 08:10:04
uri
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
text
如何在不使用SearchBar display controller的情况下单独使用SearchBar并捕获其textChange事件？

本文讨论了如何在不使用SearchBar display controller的情况下，单独使用SearchBar并捕获其textChange事件。作者介绍了实际状况，即左侧SliderMenu中的SearchBar需要在主页TableView中显示搜索结果。然后，作者提供了解决方案和步骤，帮助读者实现这一功能。 ... [详细]

蜡笔小新 2023-12-14 13:24:28
java
Spring特性实现接口多类的动态调用详解

本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]

蜡笔小新 2023-12-14 03:24:19
text
iOS Swift中如何实现自动登录？

本文介绍了在iOS Swift中如何实现自动登录的方法，包括使用故事板、SWRevealViewController等技术，以及解决用户注销后重新登录自动跳转到主页的问题。 ... [详细]

蜡笔小新 2023-12-12 11:13:05
runtime
iOS实现UITextField+Limit的字符限制方法

本文介绍了在iOS开发中使用UITextField实现字符限制的方法，包括利用代理方法和使用BNTextField-Limit库的实现策略。通过这些方法，开发者可以方便地限制UITextField的字符个数和输入规则。 ... [详细]

蜡笔小新 2023-12-12 09:50:30
text
Asp.net Mvc Framework 七 (Filter及其执行顺序) 的应用示例

本文介绍了在Asp.net Mvc中应用Filter功能进行登录判断、用户权限控制、输出缓存、防盗链、防蜘蛛、本地化设置等操作的示例，并解释了Filter的执行顺序。通过示例代码，详细说明了如何使用Filter来实现这些功能。 ... [详细]

蜡笔小新 2023-12-10 19:32:05
text
Android源码中的Builder模式及其作用

本文主要解释了什么是Builder模式以及其作用，并结合Android源码来分析Builder模式的实现。Builder模式是将产品的设计、表示和构建进行分离，通过引入建造者角色，简化了构建复杂产品的流程，并且使得产品的构建可以灵活适应变化。使用Builder模式可以解决开发者需要关注产品表示和构建步骤的问题，并且当构建流程发生变化时，无需修改代码即可适配新的构建流程。 ... [详细]

蜡笔小新 2023-12-09 20:35:28
text
花瓣|目标值_Compose 动画边学边做夏日彩虹

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Compose动画边学边做-夏日彩虹相关的知识，希望对你有一定的参考价值。引言Comp ... [详细]

蜡笔小新 2023-10-17 21:58:22
text
SmartRefreshLayout自定义头部刷新和底部加载

1.添加依赖implementation‘com.scwang.smartrefresh:SmartRefreshLayout:1.0.3’implementation‘com.s ... [详细]

蜡笔小新 2023-10-17 18:25:15
format
Highcharts翻译系列之二十：曲线图例子（二）

Highcharts翻译系列之二十：曲线图例子（二）代码 ... [详细]

蜡笔小新 2023-10-16 17:30:36

Tags | 热门标签

RankList | 热门文章