Flutter - индекс в TabBar всегда нулевой - PullRequest
0 голосов
/ 22 апреля 2020

Я хотел бы включить TabBar в тело скаффолда (см. Рисунок), а затем динамически изменить отображаемый виджет ниже, но без использования TabBarView.

Что было бы лучшим способом решить эту проблему ? Я попытался реализовать это решение:

Считать текущий индекс TabBar и затем использовать условие if в теле для отображения соответствующего виджета.

class _ProfileState extends State<Profile> with SingleTickerProviderStateMixin {

  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

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

  @override
  Widget build(BuildContext context) {

    return DefaultTabController(length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Profile'),   
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              // some other widgets
              Container(color: Colors.white,
                child: TabBar(controller: _tabController,
                  labelColor: Colors.grey[700],
                  indicatorSize: TabBarIndicatorSize.label,
                  indicatorColor: Colors.blueGrey[900],
                  tabs: myTabs,
               ],
                ),
              ),
              (_tabController?.index == 0) ?
              Container(child: Text(_tabController?.index.toString()))
              : Container(child: Text(_tabController?.index.toString())),
etc

К сожалению, значение _tabController? Индекс всегда нулевой. Как я могу решить это?

enter image description here

1 Ответ

0 голосов
/ 22 апреля 2020

Как насчет этого?
от

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

до

@override
void initState() {
  super.initState();
  _tabController = new TabController(vsync: this, length: myTabs.length);
  _tabController.addListener(_tabSelect);
}

void _tabSelect() {
  setState(() {
    _currentIndex = _tabController.index;
  });
}

и от

child: Column(
  ...
etc.

до

child: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    // some other widgets
    Container(
      color: Colors.white,
      child: TabBar(
        controller: _tabController,
        labelColor: Colors.grey[700],
        indicatorSize: TabBarIndicatorSize.label,
        indicatorColor: Colors.blueGrey[900],
        tabs: myTabs,
      ),
    ),
    Container(child: Text(_currentIndex.toString()))
  ],
),

sample

...