我的颤振应用程序的标签栏视图不起作用答案

【问题标题】：Tabbar view for my flutter app is not working我的颤振应用程序的标签栏视图不起作用
【发布时间】：2020-08-03 22:53:45
【问题描述】：

这是我的代码。更改标签栏视图内容不会更改内容。

我已经尝试将标签栏视图的子视图更改为文本，但仍然没有效果

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Container(
                height: 60,
                width: 500,
                color: Colors.teal,
                margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                child: Text(
                  'Choose Your Topic',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: 'BalooBhaina2-Regular',
                    fontWeight: FontWeight.normal,
                    fontSize: 35,
                    letterSpacing: 0.5,
                    wordSpacing: 2.0,
                    shadows: [
                      Shadow(
                        blurRadius: 50.0,
                        color: Colors.black,
                        offset: Offset(5.0, 5.0),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                height: 50,
                width: 800,
                margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
                child: DefaultTabController(
                  length: 4,
                  child: Scaffold(
                    appBar: AppBar(
                      bottom: TabBar(tabs: [
                        Tab(icon: Icon(Icons.touch_app)),
                        Tab(icon: Icon(Icons.directions_bike)),
                        Tab(icon: Icon(Icons.movie)),
                        Tab(icon: Icon(Icons.music_video)),
                      ]),
                    ),
                    body: TabBarView(
                      children: [
                        Icon(Icons.touch_app),
                        Icon(Icons.directions_bike),
                        Icon(Icons.movie),
                        Icon(Icons.music_video),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

嗯，你征求意见。请不要将所有文本加粗，并且大部分代码检查不存在，以便您在问题中添加乱码。

标签： flutter flutter-layout flutter-animation flutter-web visual-web-developer

【解决方案1】：

您可以在下面复制粘贴运行完整代码
第 1 步：您不需要 Scaffold 和 Appbar
第 2 步：您可以将 TabBar 和 TabBarView 包装为 Container

代码sn-p

Container(
    color: Colors.blue,
    height: 50,
    width: 800,
    margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
    child: TabBar(controller: _tabController, tabs: [
      Tab(icon: Icon(Icons.touch_app)),
      Tab(icon: Icon(Icons.directions_bike)),
      Tab(icon: Icon(Icons.movie)),
      Tab(icon: Icon(Icons.music_video)),
    ]),
  ),
  Expanded(
    child: Container(
      //height: 50,
      //width: 800,
      margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
      child: TabBarView(
        controller: _tabController,
        children: [
          Icon(Icons.touch_app),

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 4);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Container(
                height: 60,
                width: 500,
                color: Colors.teal,
                margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                child: Text(
                  'Choose Your Topic',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: 'BalooBhaina2-Regular',
                    fontWeight: FontWeight.normal,
                    fontSize: 35,
                    letterSpacing: 0.5,
                    wordSpacing: 2.0,
                    shadows: [
                      Shadow(
                        blurRadius: 50.0,
                        color: Colors.black,
                        offset: Offset(5.0, 5.0),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.blue,
                height: 50,
                width: 800,
                margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
                child: TabBar(controller: _tabController, tabs: [
                  Tab(icon: Icon(Icons.touch_app)),
                  Tab(icon: Icon(Icons.directions_bike)),
                  Tab(icon: Icon(Icons.movie)),
                  Tab(icon: Icon(Icons.music_video)),
                ]),
              ),
              Expanded(
                child: Container(
                  //height: 50,
                  //width: 800,
                  margin: EdgeInsets.fromLTRB(0, 0, 0, 5),
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      Icon(Icons.touch_app),
                      Icon(Icons.directions_bike),
                      Icon(Icons.movie),
                      Icon(Icons.music_video),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

与 MaterialApp 一起使用时效果很好