Блог

я хочу использовать панель вкладок в строке, а строка является дочерним элементом контейнера. причина использования строки в том, что я хочу использовать значок в правой части и использовать панель вкладок с левой стороны следующим образом,

справа есть значок, а слева — панель вкладок
, я уже пробовал это

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

но это пошло не так, и я не смог поместить панель вкладок в качестве дочернего контейнера
если вам нужна дополнительная информация, пожалуйста, дайте мне знать, спасибо за помощь

Вы можете попробовать использовать подобное. Результат выглядит следующим образом.

 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(),
    );
  

Я понимаю, что я публикую ответ поздно, но это может помочь другим.

В виджете TabBar, чтобы получить значок и текст в строке, вы можете редактировать tabs.dart файл. во вкладках.файл 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) ,

для открытия вкладок.файл dart просто нажмите ctrl left mouse clic k на Tab() widget

Я предлагаю использовать 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(),
          ]);
}