flutter实现appbar下选项卡切换

本文实例为大家分享了flutter实现appbar下选项卡切换的具体代码,供大家参考,具体内容如下

TabBar 、Tab、TabBarView 结合实现

这里实现的是appbar下的选项卡

import 'package:flutter/material.dart';

/**
 * 有状态StatefulWidget
 *  继承于 StatefulWidget,通过 State 的 build 方法去构建控件
 */
class TabBarAndTopTab extends StatefulWidget {
  通过构造方法传值
  TabBarAndTopTab();

  //主要是负责创建state
  @override
  _DemoStateWidgetState createState() => _DemoStateWidgetState();
}

/**
 * 在 State 中,可以动态改变数据
 * 在 setState 之后,改变的数据会触发 Widget 重新构建刷新
 */
class _DemoStateWidgetState extends State<TabBarAndTopTab>
    with SingleTickerProviderStateMixin {
  _DemoStateWidgetState();

  List tabs = ["首页", "发现", "我的", "设置"];

  //用于控制/监听Tab菜单切换
  //TabBar和TabBarView正是通过同一个controller来实现菜单切换和滑动状态同步的。
  TabController tabController;

  @override
  void initState() {
    ///初始化,这个函数在生命周期中只调用一次
    super.initState();
    tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  void didChangeDependencies() {
    ///在initState之后调 Called when a dependency of this [State] object changes.
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return buildTabScaffold();
  }

  //通过“bottom”属性来添加一个导航栏底部tab按钮组,将要实现的效果如下:
  Widget buildTabScaffold() {
    return Scaffold(
      appBar: AppBar(
        title: Text('标题'),
        //设置选项卡
        bottom: buildTabBar(),
        //设置标题居中
        centerTitle: true,
      ),
      //设置选项卡对应的page
      body: buildBodyView(),
    );
  }

  //当整个页面dispose时,记得把控制器也dispose掉,释放内存
  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  buildBodyView() {
    //构造 TabBarView
    Widget tabBarBodyView = TabBarView(
      controller: tabController,
      //创建Tab页
      children: tabs.map((e) {
        return Container(
          alignment: Alignment.center,
          child: Text(e, textScaleFactor: 1),
        );
      }).toList(),
    );
    return tabBarBodyView;
  }

  buildTabBar() {
    //构造 TabBar
    Widget tabBar = TabBar(
        //tabs 的长度超出屏幕宽度后,TabBar,是否可滚动
        //设置为false tab 将平分宽度,为true tab 将会自适应宽度
        isScrollable: false,
        //设置tab文字得类型
        labelStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        //设置tab选中得颜色
        labelColor: Colors.white,
        //设置tab未选中得颜色
        unselectedLabelColor: Colors.white70,
        //设置自定义tab的指示器,CustomUnderlineTabIndicator
        //若不需要自定义,可直接通过
        //indicatorColor 设置指示器颜色
        //indicatorWight 设置指示器厚度
        //indicatorPadding
        //indicatorSize  设置指示器大小计算方式
        ///指示器大小计算方式,TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
        indicatorSize: TabBarIndicatorSize.tab,
        //生成Tab菜单
        controller: tabController,
        //构造Tab集合
        tabs: tabs.map((e) => Tab(text: e)).toList());

    return tabBar;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-07-11

Android studio 切换flutterSDK之后报错及解决办法(推荐)

Windows系统上面修改了flutter sdk的环境变量地址之后Android studio上面运行flutter项目就会报错 类似于: Could not read script XXX\flutter.gradle' as it does not exist. 还有这样:flutter:Warning! The 'flutter' tool you are currently running is from a different Flutter repository 解决办法: 1.首

flutter PageView实现左右滑动切换视图

本文实例为大家分享了flutter PageView左右滑动切换视图的具体代码,供大家参考,具体内容如下 import 'dart:math'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_x/base/

Flutter以两种方式实现App主题切换的代码

概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一种设计模式:观察者模式.多种观察对象(主题资源)来观察当前主题更新的行为(被观察对象),进行主题的更新.今天和大家分享在 Flutter 平台上如何实现主题更换. 效果 实现流程 在 Flutter 项目中,MaterialApp组件为开发者提供了设置主题的api: const MaterialAp

Flutter实现页面切换后保持原页面状态的3种方法

前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实

vue页面跳转后返回原页面初始位置方法

vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

点击提交按钮后按钮变灰色不可用状态的三种方法

第一种方法:直接按钮中加入 当点击提交后,提交按钮变灰色不可用,这样可有效防止重复提交,本代码就是实现这样一个功能.从代码就可以看出,我们只需在提交按钮上加入这一句: onclick="javascript:{this.disabled=true;document.form1.submit();}",意思是当按钮点击后,将按钮的不可用属性设置为true,这样按钮就变灰了 表单提交后按钮变成灰色 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 第二种方法:通过onSubmit

(asp.net c#)DropDownList绑定后显示对应的项的两种方法

方法一: 实现代码 复制代码 代码如下: DropDownList1.DataSource = listSort; DropDownList1.DataTextField = "LogSortName"; DropDownList1.DataValueField = "LogSortID"; DropDownList1.DataBind(); DropDownList1.SelectedIndex = ddl.Items.IndexOf(DropDownList1.

vue页面离开后执行函数的实例

如下所示: destroyed: function () { console.log("我已经离开了!"); this.doSomething(); }, 说明:destroyed是与methods.mounted同层级的 以上这篇vue页面离开后执行函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue页面跳转后返回原页面初始位置方法 vue中页面跳转拦截器的实现方法 Vue指令的钩子函数使用方法

Python获取当前页面内所有链接的四种方法对比分析

本文实例讲述了Python获取当前页面内所有链接的四种方法.分享给大家供大家参考,具体如下: ''' 得到当前页面所有连接 ''' import requests import re from bs4 import BeautifulSoup from lxml import etree from selenium import webdriver url = 'http://www.testweb.com' r = requests.get(url) r.encoding = 'gb2312'

vue2.0路由切换后页面滚动位置不变BUG的解决方法

最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

解决django中form表单设置action后无法回到原页面的问题

django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.1.128,跳转后便会来到192.168.1.128/login,F5刷新也会是重新提交表单对话框,无法回到原页面. 因此就要在django服务器进行重定向,具体就是 from django.shortcuts import redirect #最后返回原页面 return redirect(url) 补充知识:Django + Ajax发送POST表单,并

Angular页面间切换及传值的4种方法

本文实例为大家分享了Angular JS页面间切换及传值 的方法,供大家参考,具体内容如下Angular JS页面间切换及传值 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. state('producers', { url: '/produ

Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载. ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. 下面我们就展示下Vie