Question

我要在一行中使用标签栏，并且行是容器的子级使用行的原因是，我想在右侧使用图标，而在左侧使用标签栏，\

右侧有一个图标，左侧有一个标签栏
我已经尝试过了

 child: Row(
                children: [
                  Expanded(child: Text('data')),
                  AppBar(
                    bottom: TabBar(

但是出了错，我也不能将Tabbar当作容器子级如果您需要更多信息，请告诉我，谢谢您的帮助

Answer 1

您可以尝试这样的用法。结果看起来像这样。

class ExamplePage extends StatefulWidget {
  @override
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> with SingleTickerProviderStateMixin {

  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(
      length: 2,
      initialIndex: 0,
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(40),
          child: ListView(
            shrinkWrap: true,
            children: [

              Row(
                children: [

                  Expanded(
                    flex: 5,
                    child: TabBar(
                      controller: tabController,
                      tabs: [
                        Tab(child: Text('Page 1')),
                        Tab(child: Text('Page 2')),
                      ],
                    ),
                  ),

                  Expanded(
                    flex: 1,
                    child: Icon(Icons.add),
                  )

                ],
              )

            ],
          )
        ),
      ),
      body: Container(),
    );

Answer 2

我知道我的回答晚了，但这可能会帮助其他人。

在 TabBar Widget 中，获取连续的图标和文本您可以编辑 tabs.dart 文件。在 tabs.dart 文件中转到第 118 行（在我的情况下）你只需要将 label = Column (....) 替换为 label = Row( ... ) 并将行号 71 this.iconMargin = const EdgeInsets.only(bottom: 10.0), 替换为 this.iconMargin = const EdgeInsets.only(bottom: 10.0, right: 10.0),

<块引用>

打开 tabs.dart 文件只需点击 ctrl+left mouse click on Tab() widget

Answer 3

我建议像我的代码一样使用ButtomNavigationBarItem

了解更多：https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

import 'package:buudeli/model/user_model.dart';
import 'package:buudeli/util/style1.dart';
import 'package:buudeli/widget/about_shop.dart';
import 'package:buudeli/widget/showMenuFood.dart';
import 'package:flutter/material.dart';

class ShowShopMenu extends StatefulWidget {
  final UserModel userModel;
  ShowShopMenu({Key key, this.userModel}) : super(key: key);
  @override
  _ShowShopMenuState createState() => _ShowShopMenuState();
}

class _ShowShopMenuState extends State<ShowShopMenu> {
  UserModel userModel;
  List<Widget> listWidgets = List(); //[AboutShop(), ShowMenuFood()];
  int index = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    userModel = widget.userModel;
    listWidgets.add(AboutShop(userModel: userModel));
    listWidgets.add(ShowMenuFood(userModel: userModel,));
  }

  BottomNavigationBarItem aboutShopNav() {
    return BottomNavigationBarItem(
      icon: Icon(Icons.info),
      title: Text('รายละเอียดร้าน'), //detial
    );
  }

  BottomNavigationBarItem showMenuFoodNav() {
    return BottomNavigationBarItem(
      icon: Icon(Icons.fastfood),
      title: Text('รายการอาหาร'), //food menu
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [Style1().iconShowShop(context)],
        title: Text(userModel.nameShop),
      ),
      body: listWidgets.length == 0
          ? Style1().showProgress()
          : listWidgets[index],
      bottomNavigationBar: showButtonNav(),
    );
  }

  BottomNavigationBar showButtonNav() => BottomNavigationBar(
          currentIndex: index,
          onTap: (value) {
            setState(() {
              index = value;
            });
          },
          items: <BottomNavigationBarItem>[
            aboutShopNav(),
            showMenuFoodNav(),
          ]);
}

如何在连续颤动中使用标签栏

3 个答案: