TabBar в нижней части приложения с столбцом

Я пытаюсь разместить TabBar внизу приложения.

Пока это сработало, но я не могу заставить работать страницы (TabBarView). Он просто выглядит черным и не отвечает. TabBar тоже не отвечает. Я ошибся?

На данный момент это выглядит так:

изображение

И код выглядит так:

import 'package:flutter/material.dart';

void main() => runApp(Bookkeeper());

class Bookkeeper extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
        home: DefaultTabController(
            length: 4,

            child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    verticalDirection: VerticalDirection.up,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                        AppBar(
                            backgroundColor: Color(0xFF3F5AA6),
                            title: Container(
                                padding: EdgeInsets.only(top: 8.0),
                                child: menu(),
                            ),
                        ),

                    TabBarView(
                        children: [
                            Icon(Icons.directions_car),
                            Icon(Icons.directions_transit),
                            Icon(Icons.directions_bike),
                            Icon(Icons.directions_bike),
                        ],
                    ),
                ],
            ),
        ),
    );
}

Widget menu() {
        return TabBar(
            tabs: [
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.euro_symbol),
                                Text(
                                    "Transactions",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.8,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.assignment),
                                Text(
                                    "Bills",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.5,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.account_balance_wallet),
                                Text(
                                    "Balance",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.5,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
                Tab(
                    child: Container(
                        height: 45.0,
                        child: Column(
                            children:
                            [
                                Icon(Icons.settings),
                                Text(
                                    "Options",
                                    style: new TextStyle(
                                        height: 1.5,
                                        fontSize: 9.5,
                                        color: Colors.white,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
            ],
        );
    }
}

person TheUniqueProgrammer    schedule 13.08.2018    source источник
comment
почему вы используете контейнер внутри вкладки, у вкладки есть свойства значка и текста   -  person diegoveloper    schedule 13.08.2018
comment
Эй, это плохой стиль программирования, просто проигнорируйте его. Основная цель - переместить панель вкладок вниз. Мне удалось это сделать, но теперь TabBarView не работает.   -  person TheUniqueProgrammer    schedule 13.08.2018


Ответы (1)


Я исправил ваш код, посмотрите.

  class Bookkeeper extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: DefaultTabController(
          length: 4,
          child: Scaffold(
            appBar: AppBar(
              backgroundColor: Color(0xFF3F5AA6),
              title: Text("Title text"),
              bottom: menu(),
            ),
            body: TabBarView(
              children: [
                Container(child: Icon(Icons.directions_car)),
                Container(child: Icon(Icons.directions_transit)),
                Container(child: Icon(Icons.directions_bike)),
                Container(child: Icon(Icons.directions_bike)),
              ],
            ),
          ),
        ),
      );
    }

    Widget menu() {
      return TabBar(
        tabs: [
          Tab(
            text: "Transactions",
            icon: Icon(Icons.euro_symbol),
          ),
          Tab(
            text: "Bills",
            icon: Icon(Icons.assignment),
          ),
          Tab(
            text: "Balance",
            icon: Icon(Icons.account_balance_wallet),
          ),
          Tab(
            text: "Options",
            icon: Icon(Icons.settings),
          ),
        ],
      );
    }
  }

Вы должны создать основу для использования AppBar, а затем поместить вкладки внутри свойства bottom.

ОБНОВЛЕНИЕ

Использование bottomNavigationBar для размещения Tabs в нижней части экрана

  class Bookkeeper extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: DefaultTabController(
          length: 4,
          child: Scaffold(
            appBar: AppBar(
              backgroundColor: Color(0xFF3F5AA6),
              title: Text("Title text"),
            ),
            bottomNavigationBar: menu(),
            body: TabBarView(
              children: [
                Container(child: Icon(Icons.directions_car)),
                Container(child: Icon(Icons.directions_transit)),
                Container(child: Icon(Icons.directions_bike)),
                Container(child: Icon(Icons.directions_bike)),
              ],
            ),
          ),
        ),
      );
    }

     Widget menu() {
return Container(
  color: Color(0xFF3F5AA6),
  child: TabBar(
    labelColor: Colors.white,
    unselectedLabelColor: Colors.white70,
    indicatorSize: TabBarIndicatorSize.tab,
    indicatorPadding: EdgeInsets.all(5.0),
    indicatorColor: Colors.blue,
    tabs: [
      Tab(
        text: "Transactions",
        icon: Icon(Icons.euro_symbol),
      ),
      Tab(
        text: "Bills",
        icon: Icon(Icons.assignment),
      ),
      Tab(
        text: "Balance",
        icon: Icon(Icons.account_balance_wallet),
      ),
      Tab(
        text: "Options",
        icon: Icon(Icons.settings),
      ),
    ],
  ),
);

} }

введите описание изображения здесь

person diegoveloper    schedule 13.08.2018
comment
Привет, я хочу, чтобы панель приложений была внизу, как на моем скриншоте. Вот как я это пробовал, и это не сработало. На самом деле это так, но страницы не отвечали. Еще раз снимок экрана: i.imgur.com/dTTcj2X.png - это должно выглядеть так. - person TheUniqueProgrammer; 13.08.2018
comment
Спасибо, но теперь эффекты TabBar исчезли. - person TheUniqueProgrammer; 13.08.2018
comment
что ты имеешь в виду? не могли бы вы выложить скриншот? - person diegoveloper; 13.08.2018
comment
Я имею в виду, что непрозрачность / прозрачность других значков меняется при смене страницы. С вашей версией этого больше не происходит. Кроме того, линия под выделением имеет разную ширину. Хотя это уже близко. - person TheUniqueProgrammer; 13.08.2018
comment
просто измените свойства, братан, я обновил свой ответ, проверьте метод menu () - person diegoveloper; 13.08.2018
comment
Спасибо, чувак, я дал тебе положительный ответ и дал правильный ответ. Я буду работать дальше. Извините за проблемы, я новичок в этой штуке с Flutter. - person TheUniqueProgrammer; 13.08.2018
comment
@diegoveloper Отличная работа, но у меня есть один вопрос ... если мы будем использовать нижнюю панель навигации, смогу ли я сохранить состояние на каждой вкладке ... Я слышал, есть проблемы с состоянием? - person anoop4real; 09.10.2020