Question

嗨，我正在努力开发一款应用程序。我想在屏幕上显示标签。我正在尝试以下操作，但未显示标签。

有人知道这是什么原因吗？

class DashboardScreen extends StatelessWidget {
  Widget bodyData() => SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: DefaultTabController(
                  length: 3,
                  child: Scaffold(
                    appBar: AppBar(
                      bottom: TabBar(
                        tabs: [
                          Tab(icon: Icon(Icons.directions_car)),
                          Tab(icon: Icon(Icons.directions_transit)),
                          Tab(icon: Icon(Icons.directions_bike)),
                        ],
                      ),
                      title: Text('Tabs Demo'),
                    ),
                    body: TabBarView(
                      children: [
                        Icon(Icons.directions_car),
                        Icon(Icons.directions_transit),
                        Icon(Icons.directions_bike),
                      ],
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
            ],
          ),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return CommonScaffold(
      appTitle: "Pay",
      showDrawer: true,
      bodyData: bodyData(),
    );
  }
}

当我有以下代码时，它将正确显示文本。

  Widget bodyData() => SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(
                  child: Text(
                    "Pay Your Bills",
                    style:
                        TextStyle(fontWeight: FontWeight.w700, fontSize: 20.0),
                  ),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
            ],
          ),
        ),
      );

Answer 1

我不知道您确切想要创建什么，但是它们是您的代码的几个问题。您可以检查以下代码，使其在“标签”视图中正常运行。

import 'package:flutter/material.dart';

  void main() {
    runApp(MyHomePage());
  }

  class MyHomePage extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: new ThemeData(
          accentColor: Colors.blue,
        ),
        home: DashboardScreen(),
      );
    }
  }
  class DashboardScreen extends StatelessWidget {
    Widget bodyData() =>
        DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              bottom: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
              title: Text('Tabs Demo'),
            ),
            body: TabBarView(
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            ),
          ),
        );


    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: bodyData(),
      );
    }
  }

Answer 2

看看官方教程：https://flutter.io/cookbook/design/tabs/

从示例代码开始，然后慢慢添加修改以了解正在发生的事情（同时在模拟器中查看实时结果）。

Answer 3

我为颤动标签制作了一种更简单的方法

bottom: TabBar(
tabs: [
Tab(text: 'First',),
Tab(text: 'Second',),
Tab(text: 'Third'),
  ],
),
title: Text('Tabs'),

有关更多信息，http://www.androidcoding.in/2019/11/13/flutter-tabs/

选项卡未显示在颤动中

3 个答案: