我的颤振应用程序的标签栏视图不起作用
Posted
技术标签:
【中文标题】我的颤振应用程序的标签栏视图不起作用【英文标题】: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),
],
),
),
),
),
],
),
),
),
);
【问题讨论】:
嗯,你征求意见。请不要将所有文本加粗,并且大部分代码检查不存在,以便您在问题中添加乱码。 【参考方案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 一起使用时效果很好以上是关于我的颤振应用程序的标签栏视图不起作用的主要内容,如果未能解决你的问题,请参考以下文章