flutter - 如何使用 Flutter 创建一个包含 TabBar 和（自定义）BarWidget 的小部件？

Question

可以找到许多关于如何使用 AppBar 创建选项卡式 Flutter 应用程序的示例。这里一切都很清楚。但是如何将 TabBar 和 (CustomX) BarWidget 添加到小部件 (Custom) BarWidget？那些。创建小部件“选项卡内的选项卡”，如下图所示：

我可以将 TabBar 添加到小部件，但我不知道如何添加 (CustomX) BarWidget：

编码：

class ElementTabbedPage extends StatefulWidget {
  //ElementTabbedPage({Key key}) : super(key: key);
  IGUIBridge _element;
  ElementTabbedPage(this._element);

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

class _ElementTabbedPageState extends State<ElementTabbedPage> with TickerProviderStateMixin {
  List<String> _tabsContainer = ['P1', 'P2', 'P3'];
  TabController _tabController;

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

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

  Widget build(context) {
    print ('_ElementTabbedPageState.build->${widget._element.name()}');
    return
    Container(
        child: Column(
            children: <Widget>[
             TabBar(
                 controller: _tabController,
                 isScrollable: true,
                 tabs: _tabsContainer
                     .map((x) => Container(
                        width: 60.0,
                        child: Tab(text: x,
                     //icon: Icon(Icons.favorite),
                   ),
                 )).toList(),
             ),

              //PanelBarWidget(tabController: _tabController, tabsContainer: _tabsContainer),

            ]
        )
    );
  }
}

class PanelBarWidget extends StatefulWidget {
  const PanelBarWidget({
    Key key,
    @required TabController tabController,
    @required List<String> tabsContainer,
  })
      : _tabController = tabController,
        _tabsContainer = tabsContainer,
        super(key: key);
  @override
  _PanelBarWidgetState createState() => new _PanelBarWidgetState();

  final TabController _tabController;
  final List<String> _tabsContainer;

}

class _PanelBarWidgetState extends State<PanelBarWidget> {
  @override
  Widget build(BuildContext context) {
    return new TabBarView(
        controller: widget._tabController,
        children: widget._tabsContainer.map(createView).toList());
  }


  Container createView(x) {
    List<String> list = ["A 11", "A 12", "A 13"];
    return Container(child:
    Text(x),
    );
  }
}

标签： fluttertabs

Answer 1

该问题可以解决如下：

import 'package:flutter/material.dart';
import 'dart:async';
import '../manageables/IManageable.dart';
import '../singletons/GuiAdapter.dart';
import '../bridge/IGUIBridge.dart';

class ElementTabbedPage extends StatefulWidget {
  //ElementTabbedPage({Key key}) : super(key: key);
  IGUIBridge _element;

  ElementTabbedPage(this._element);

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

class _ElementTabbedPageState extends State<ElementTabbedPage>
    with TickerProviderStateMixin {
  List<String> _tabsContainer = ['P1', 'P2', 'P3'];
  TabController _tabController;

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

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

  Widget build(context) {
    print('_ElementTabbedPageState.build->${widget._element.name()}');
    return Column(children: <Widget>[
      TabBar(
        controller: _tabController,
        isScrollable: true,
        unselectedLabelColor: Colors.black38,
        indicatorSize: TabBarIndicatorSize.tab,
        indicator: BoxDecoration(
            borderRadius: BorderRadius.circular(8), color: Colors.black38),
        tabs: _tabsContainer
            .map((x) => Container(
                  width: 60.0,
                  child: Tab(
                    text: x,
                    //icon: Icon(Icons.favorite),
                  ),
                ))
            .toList(),
      ),
      Container(
        child: Expanded(
          child: PanelBarWidget(
              tabController: _tabController, tabsContainer: _tabsContainer),
        ),
      )
    ]);
  }
}

class PanelBarWidget extends StatefulWidget {
  const PanelBarWidget({
    Key key,
    @required TabController tabController,
    @required List<String> tabsContainer,
  })  : _tabController = tabController,
        _tabsContainer = tabsContainer,
        super(key: key);

  @override
  _PanelBarWidgetState createState() => new _PanelBarWidgetState();

  final TabController _tabController;
  final List<String> _tabsContainer;
}

class _PanelBarWidgetState extends State<PanelBarWidget> {
  @override
  Widget build(BuildContext context) {
    return new TabBarView(
        controller: widget._tabController,
        children: widget._tabsContainer.map(createView).toList());
  }

  Container createView(x) {
    return Container(
      color: Colors.lightGreen,
      child: Center(
        child: Text(x),
      ),
    );
  }
}

但也许可以存在不同的解决方案？