【问题标题】:TabBar on bottom of app with Column带有 Column 的应用程序底部的 TabBar
【发布时间】:2019-01-20 08:08:19
【问题描述】:

我正在尝试将 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,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
            ],
        );
    }
}

【问题讨论】:

  • 为什么在Tab里面使用Container,Tab有图标和文字属性
  • 嘿,这是不好的编码风格,忽略它。主要目的是将标签栏置于底部。我设法做到了,但现在 TabBarView 不起作用。

标签: flutter tabbar appbar


【解决方案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 属性内。

更新

使用bottomNavigationBarTabs 定位在屏幕底部

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

} }

【讨论】:

  • 嘿,我想要底部的 AppBar,就像我的屏幕截图一样。这就是我尝试过的方法,但没有奏效。实际上确实如此,但页面没有响应。再次截图:i.imgur.com/dTTcj2X.png - 应该是这样的。
  • 谢谢,但现在 TabBar 效果消失了。
  • 什么意思?可以截图吗?
  • 我的意思是当你改变页面时,其他图标的不透明度/透明度会改变。您的版本不再发生这种情况。选择下的线也没有相同的宽度。不过,它即将到来。
  • 谢谢你,我给了你一个赞成和正确的答案。我会从那里开始工作。抱歉,我是 Flutter 的新手。
猜你喜欢
  • 1970-01-01
  • 2011-09-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多