首页 > 解决方案 > 将值传递给要在底部工作表中使用的浮动操作按钮

问题描述

在这个小部件中,选项卡在类型之间导航,如果有问题,它会进入指定的屏幕。如果是论坛,它会转到另一个论坛。问题是我需要将当前点击的类型传递给浮动操作按钮中的按下功能。但是浮动操作按钮位于脚手架主体之外。有没有办法将值传递给浮动操作按钮?


class TabScreen extends StatelessWidget {

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState();
  @override
  Widget build(BuildContext context) {
    final bool showfab = MediaQuery.of(context).viewInsets.bottom == 0.0;
    final AuthService authService = Provider.of<AuthService>(context);
 return StreamBuilder<List<String>>(
              stream: forumServices.forumsTypes$,
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return CircularProgressIndicator();
                }
                List<String> types = snapshot.data;
                num tabLen = types.length;

                return DefaultTabController(
                    length: tabLen,
                    child: Scaffold(
                      key: _scaffoldKey,

                      body: CustomScrollView(slivers: <Widget>[
                        SliverAppBar(
                          title: Text("kdkdkkd"),
                          bottom: TabBar(
                              tabs: types.map((String f) {
                            return Text(f);
                          }).toList()),
                        ),
                        SliverFillRemaining(
                          child: StreamBuilder<List<Forums>>(
                              stream: forumServices.forums$,
                              builder: (context, snap) {
                                if (!snap.hasData) {
                                  return CircularProgressIndicator();
                                }
                                final forum = snap.data;
                                return TabBarView(
                                  children: types.map((String type) {
                                    List<Forums> listofthistype =
                                        forum.where((Forums fo) {
                                      return fo.type == type;
                                    }).toList();

                                    final cards = listofthistype
                                        .map((thistype) => ForumCard(
                                              choosentype: thistype,
                                              forumServices: forumServices,
                                            ))
                                        .toList();

                                    return ListView(
                                      children: cards,
                                    );
                                  }).toList(),
                                );
                              }),
                        ),
                      ]),
                      floatingActionButton:
                        FloatingActionButton(
                              onPressed: () => _showBottom(),
                              tooltip: 'Increment',
                              child: Icon(Icons.add),
                            )

                    ));
              });

标签: flutterparameter-passingfloating-action-buttonscaffold

解决方案


删除DefaultTabController小部件并创建自己的小部件TabController- 这允许您添加一个侦听器,TabController每次用户导航到不同的选项卡时都会触发该侦听器。您可以使用此机制获取与当前选项卡的索引关联的数据,例如类型。

这是您提供的代码,以及我上面提到的修改。类型存储在currentType变量中,您可以在点击 Fab 时使用该变量。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class TabScreen extends StatefulWidget {
  @override
  _TabScreenState createState() => _TabScreenState();
}

class _TabScreenState extends State<TabScreen> with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  TabController tabController;
  String currentType;

  @override
  Widget build(BuildContext context) {
    final bool showfab = MediaQuery.of(context).viewInsets.bottom == 0.0;
    final AuthService authService = Provider.of<AuthService>(context);

    return StreamBuilder<List<String>>(
      stream: forumServices.forumsTypes$,
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const CircularProgressIndicator();
        }
        List<String> types = snapshot.data;

        if (tabController == null) {
          currentType = types.first;

          tabController = TabController(length: types.length, vsync: this);
          tabController.addListener(() {
            currentType = types.elementAt(tabController.index);
          });
        }

        return Scaffold(
          key: _scaffoldKey,
          body: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                title: const Text("kdkdkkd"),
                bottom: TabBar(
                controller: tabController,
                tabs: types.map((String f) =>  Text(f)).toList()),
              ),
              SliverFillRemaining(
                child: StreamBuilder<List<Forums>>(
                  stream: forumServices.forums$,
                  builder: (context, snap) {
                    if (!snap.hasData) {
                      return const CircularProgressIndicator();
                    }
                    final forum = snap.data;

                    return TabBarView(
                      controller: tabController,
                      children: types.map((String type) {
                        List<Forums> listOfThisType = forum.where((Forums fo) => fo.type == type).toList();

                        return ListView(
                          children: listOfThisType.map((thisType) => ForumCard(
                            choosentype: thisType,
                            forumServices: forumServices,
                          )).toList(),
                        );
                      }).toList(),
                    );
                  },
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => _showBottom(),
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        );
      },
    );
  }
}

推荐阅读