首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从flutter中的子选项卡动态设置appbar动作

在Flutter中,可以通过使用TabBar和TabBarView来实现子选项卡,并且可以动态设置AppBar的动作。

首先,需要在Flutter项目中引入flutter/material.dart库,该库提供了AppBar、TabBar和TabBarView等组件。

接下来,可以创建一个StatefulWidget来实现子选项卡的功能。在该StatefulWidget的build方法中,可以使用DefaultTabController来管理TabBar和TabBarView,并设置子选项卡的数量和内容。

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyTabbedPage extends StatefulWidget {
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // Content of Tab 1
          Container(
            child: Center(
              child: Text('Tab 1 Content'),
            ),
          ),
          // Content of Tab 2
          Container(
            child: Center(
              child: Text('Tab 2 Content'),
            ),
          ),
          // Content of Tab 3
          Container(
            child: Center(
              child: Text('Tab 3 Content'),
            ),
          ),
        ],
      ),
    );
  }
}

在上述代码中,我们创建了一个有3个子选项卡的AppBar,并使用TabBar和TabBarView来实现子选项卡的切换和内容展示。可以根据实际需求修改子选项卡的数量和内容。

关于动态设置AppBar的动作,可以在AppBar的actions属性中传入一个Widget列表,每个Widget代表一个动作按钮。可以根据需要在不同的子选项卡中动态设置不同的动作按钮。

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyTabbedPage extends StatefulWidget {
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
        actions: _buildActions(), // 动态设置AppBar的动作
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // Content of Tab 1
          Container(
            child: Center(
              child: Text('Tab 1 Content'),
            ),
          ),
          // Content of Tab 2
          Container(
            child: Center(
              child: Text('Tab 2 Content'),
            ),
          ),
          // Content of Tab 3
          Container(
            child: Center(
              child: Text('Tab 3 Content'),
            ),
          ),
        ],
      ),
    );
  }

  List<Widget> _buildActions() {
    if (_tabController.index == 0) {
      // 返回Tab 1的动作按钮
      return [
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            // 执行动作按钮的操作
          },
        ),
      ];
    } else if (_tabController.index == 1) {
      // 返回Tab 2的动作按钮
      return [
        IconButton(
          icon: Icon(Icons.edit),
          onPressed: () {
            // 执行动作按钮的操作
          },
        ),
      ];
    } else if (_tabController.index == 2) {
      // 返回Tab 3的动作按钮
      return [
        IconButton(
          icon: Icon(Icons.delete),
          onPressed: () {
            // 执行动作按钮的操作
          },
        ),
      ];
    } else {
      return [];
    }
  }
}

在上述代码中,我们通过_buildActions方法根据当前选中的子选项卡来动态设置AppBar的动作按钮。可以根据实际需求在不同的子选项卡中设置不同的动作按钮,并在onPressed回调中执行相应的操作。

这是一个简单的示例,展示了如何在Flutter中使用子选项卡动态设置AppBar的动作。在实际开发中,可以根据具体需求进行更加复杂和丰富的实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

---- BottomNavigationBar 底部导航栏 onTap 回调方法 , 设置当前选中选项卡索引 , 根据该索引值修改 Scaffold 组件 body 对应组件 , 如果选项卡索引为...( // 对应底部导航栏设置选项卡 // 设置容器装饰器 , BoxDecoration 是最常用装饰器 // 可以自行查看 BoxDecoration 可以设置属性...// Column 组件, 这里设置 Text 文本组件 children: [ Text("设置页面选项卡")...可以设置属性 decoration: BoxDecoration(color: Colors.white), // 设置 child 组件居中方式, 居中放置...设置容器装饰器 , BoxDecoration 是最常用装饰器 // 可以自行查看 BoxDecoration 可以设置属性 decoration: BoxDecoration

2.3K00
  • Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )

    : 点击事件 : onPressed ; 显示组件 : child ; FloatingActionButton 构造函数源码 : 在构造函数可选参数 , 可以查询该组件可设置参数选项 ; class...可以设置属性 decoration: BoxDecoration(color: Colors.white), // 设置 child 组件居中方式, 居中放置...设置容器装饰器 , BoxDecoration 是最常用装饰器 // 可以自行查看 BoxDecoration 可以设置属性 decoration: BoxDecoration...Container( // 对应底部导航栏设置选项卡 // 设置容器装饰器 , BoxDecoration 是最常用装饰器 // 可以自行查看...) : Container( // 对应底部导航栏设置选项卡 // 设置容器装饰器 , BoxDecoration 是最常用装饰器

    2.7K00

    Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

    : 该组件是被导航组件 , 设置多个布局结构 , 同时只能显示一个 ; DefaultTabController : 该组件用于关联控制 TabBar 和 TabBarView 组件 ; 界面组件...构造函数原型 : /// 为给定组件创建一个默认导航控制器 /// /// length 参数必须不为空 , 并且大于 1 ; /// length 个数必须等于 TabBar..., 主要设置一组 Tab 组件 ; 通常放在 AppBar 组件底部 , 也就是赋值给 AppBar.bottom , 与 TabBarView 结合起来使用 ; TabBar Tab 组件个数..., 每个 TabBar 组件需要设置若干个 Tab 组件 ( 至少一个 ) ; Tab 构造函数 : /// 创建一个材料设计风格选项卡. /// /// 至少设置一个 text 文本和...: AppBar( /// 标题栏标题 title: const Text('顶部导航栏'), /// 设置顶部导航栏

    2.8K40

    Flutter 构建完整应用手册-设计基础知识 顶

    另外,Flutter提供Material Widgets将使用我们主题为AppBars,Buttons,Checkboxes等设置背景颜色和字体样式。...使用选项卡 使用选项卡是遵循Material Design指南应用程序常见模式。 Flutter包含创建选项卡布局作为材料库一部分便捷方式。...在这个例子,我们将创建一个带有3个Tab小部件TabBar,并将其放置在AppBar。...3.为每个选项卡创建内容 现在我们有了选项卡,我们希望在选择标签时显示内容。 为此,我们将使用TabBarView部件。 注意:顺序很重要,必须与TabBar选项卡顺序相对应!...要使用字体作为默认字体,我们可以将fontFamily属性设置为应用theme一部分。 我们提供给fontFamily值必须与pubspec.yaml声明family相匹配。

    7.1K10

    flutter:禁用 tabbar手势教程

    在手机上,tabbar是很常见导航方式,在flutter我们通过TabBar、TabController和TabBarView轻松实现效果。...在flutter,我们如何通过代码控制选项卡导航呢? 下面,我们通过以下例子来说明tabbar功能: 按下按钮时跳转到选定选项卡。...禁用标签栏上用户交互,让我们可以「引导用户按顺序浏览多个选项卡」。 Flutter TabBar基础设置 我们首先使用StatefulWidget 创建TabBar。...禁用用户TabBar交互 为了解决这个问题,我们可以创建一个ReadOnlyTabBar用IgnorePointer忽略与选项卡所有交互: // https://stackoverflow.com/...AppBar( bottom: ReadOnlyTabBar(child: TabBar(...), ), ) 除了tabBar点击事件外,我们还要保证TabBarView手势也不能使用

    1.4K30

    FlutterFlutter 布局组件 ( Wrap 组件 | Expanded 组件 )

    字段 ; 设置布局组件 : children 字段 ; // 可自动换行水平线性布局 Wrap( // 设置水平边距 spacing: 间距值 ( double 类型 ), // 设置垂直间距...runSpacing: 间距值 ( double 类型 ), children: [ 设置若干组件 ] ) 代码示例 : Chip 组件用法参考 【Flutter...// 回调 StatefulWidget 组件 setState 设置状态方法 , 修改当前选中索引 // 之后 BottomNavigationBar 组件会自动更新当前选中选项卡...: [ Container( // 对应底部导航栏设置选项卡 // 设置容器装饰器 , BoxDecoration 是最常用装饰器..., ) : Container( // 对应底部导航栏设置选项卡 // 设置容器装饰器 , BoxDecoration 是最常用装饰器

    9.2K00

    Flutter》-- 4.Flutter组件基础

    FlutterWidget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示在设备屏幕上显示元素,而是一个描述显示元素配置数据。...Flutter真正代表屏幕显示元素类是Element。 在大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...Scaffold常用属性: 1)appBar:用于设置顶部标题栏,不设置就不显示; 2)body:Widget类型,显示Scaffold内容主要容器。...开发,Widget状态管理主要分为3种场景,即Widget自身状态管理、Widget状态管理、父Widget和Widget都存在状态管理。...3)销毁阶段 deactivate():当组件可见状态发生变化时,deactivate()会被调用,此时状态组件会被暂时视图树移除。

    12.5K30

    Flutter学习笔记:BottomNavigationBar实现多个Navigation

    长话短说: 创建一个带Scaffold和BottomNavigationBarapp。 在每一个Scaffold,为每个选项卡创建一个包含一个子项Stack。...首先,看一下免责声明: 本文假设您熟悉Flutter导航。 更多知识,请参阅Navigation基础知识教程,以及Navigator,MaterialPageRoute和MaterialApp。...你可能好奇 Navigator是哪来。 我们自己没有创建一个,我们App类父级是位于控件树根部MaterialApp。...这将Offstage控件与TabNavigator一起使用。 如果正在呈现选项卡与当前选项卡不匹配,则offstage属性为true。...1_qQW2iGXiWL2F1tu6cLQfwg.gif 需要注意一点是,当我们在Android上推送新路线时,会底部滑入。 相反,惯例是在iOS上右侧滑入。

    4.3K20

    Flutter》-- 7.事件处理

    Flutter原始指针事件模型,在手指接触屏幕发起触摸事件时,Flutter会首先确定手指与屏幕发生接触位置上究竟有哪些组件,然后通过命中测试(Hit Test)交给最内层组件去响应。...在Flutter事件模型PointerEvent是Flutter原始指针事件基础类,可以用它获取当前指针一些信息: 1)position:全局坐标的偏移量; 2)delta:两次指针移动事件距离...对于组件层面的原始指针事件监听,Flutter提供了一个Listener,可以用它监听包裹组件原始指针事件。...开发,Gesture API代表手势语义抽象,组件层面监听手势可以使用GestureDetector等手势响应组件。...示例代码:动态改变富文本文字大小 import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; void

    1.9K30

    Flutter』项目实战(苹果计算器)搭建基本结构

    Scaffold 是一个组件,用于实现页面的基本结构 home: Scaffold( // appBar 是 Scaffold 一个属性,表示页面的头部 appBar...: AppBar( // title 是 AppBar 一个属性,表示头部标题 title: const Text('计算器'), // centerTitle...alignment: Alignment.centerRight, // padding 表示容器内边距, EdgeInsets.fromLTRB 表示分别设置左、上、右、下内边距...,因为是动态计算需要用状态保存 _output, style: const TextStyle(fontSize: 62, color: Colors.white...您每一条评论对我都至关重要,我会尽快给予回复。如果您觉得这篇文章对您有所启发或帮助,请不吝赞赏、收藏或分享。您每一个动作都是对我创作最大鼓励和支持。谢谢您阅读和陪伴!

    39651

    Flutter』项目实战(苹果计算器)处理输入数据

    如果代码都写在 onTap 方法,那么代码会非常冗余,所以我将代码抽取出来,封装成一个方法,这个方法作用就是处理输入数据,代码如下: /// Flutter 程序入口文件 import 'package...:flutter/material.dart'; /// Flutter 程序入口函数 void main() { // 1.Flutter 主函数,程序一运行起来就会执行 // 2.运行...是 Scaffold 一个属性,表示页面的头部 appBar: AppBar( // title 是 AppBar 一个属性,表示头部标题..., const EdgeInsets.only 表示只设置某个方向外边距 margin: const EdgeInsets.only(top: 10), // child 表示容器组件...您每一条评论对我都至关重要,我会尽快给予回复。 如果您觉得这篇文章对您有所启发或帮助,请不吝赞赏、收藏或分享。 您每一个动作都是对我创作最大鼓励和支持。 谢谢您阅读和陪伴!

    21621
    领券