Использовать разные FAB с разными вкладками во Flutter, и менять кнопки при перемещении между ними? - PullRequest
Новая
       105

Использовать разные FAB с разными вкладками во Flutter, и менять кнопки при перемещении между ними?

0 голосов
/ 03 мая 2020

Я пытаюсь настроить вкладки с помощью FAB, например, как показано в Руководствах по дизайну материалов.

У меня довольно много получилось, добавив слушателя на TabController и изменение моего FAB там: 

@override
void initState() {
  ...
  _tabController = TabController(
    length: 5,
    vsync: this,
  )..addListener(() {
      setState(() {
        _fabData = _fabDatas[_tabController.index];
      });
    });
  ...
}

@override
Widget build(BuildContext context) {
  final fab = _fabData == null
      ? null
      : FloatingActionButton(
          isExtended: _fabData.expanded,
          tooltip: _fabData.tooltip,
          child: Icon(_fabData.icon),
          onPressed: () {
            _fabData.onPressed(context);
          },
        );

  return Scaffold(
    ...
    floatingActionButton: fab,
    ...
  );
}

Проблема в том, что слушатели контроллера вкладок, кажется, вызываются только после того, как переключение вкладок завершено полностью, а не на полпути. Если пользователь проведет пальцем от одной вкладки к другой, вкладка полностью переместится, затем остановится, а затем кнопка изменится.

Есть ли способ вместо этого вызвать это в середине пролистывания

1 Ответ

0 голосов
/ 03 мая 2020

Вам не нужно со слушателем, попробуйте это: 

import 'package:flutter/material.dart';

class TabControllerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tabs work',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _fabData = [
    'Tab1',
    'Tab2',
    'Tab3',
    'Tab4',
    'Tab5'
  ]; // Replace with your OBJECT!!!

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _fabData.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            bottom: TabBar(
              tabs: _fabData
                  .map((String t) => Tab(
                        text: t,
                      ))
                  .toList(),
            ),
          ),
          body: TabBarView(
              children: _fabData.map((String text) {
            return Container(
              child: Stack(
                children: [
                  Positioned(
                    bottom: 16,
                    right: 16,
                    child: FloatingActionButton(
                      // TODO USE YOUR Object
                      isExtended: true, //_fabData.expanded, 
                      //tooltip: _fabData.tooltip,
                      child: Icon(Icons.bookmark), //Icon(_fabData.icon),
                      onPressed: () {
                        //_fabData.onPressed(context);
                      },
                    ),
                  )
                ],
              ),
            );
          }).toList()),
        ));
  }
}
...