gpt4 book ai didi

android - 如何在屏幕中心 float 创建标签栏?

转载 作者:行者123 更新时间:2023-12-03 13:29:24 28 4
gpt4 key购买 nike

我尝试在尝试使用flutter的同时在屏幕中央创建一个标签栏,将TabBarView放在一列中,但遇到此错误。请解决此问题。

I/flutter ( 3983): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3983): The following assertion was thrown during performResize():
I/flutter ( 3983): Horizontal viewport was given unbounded height.
I/flutter ( 3983): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter ( 3983): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter ( 3983): vertical space in which to expand.
源代码是
class profilePage extends StatefulWidget {
@override
profilePageState createState() => profilePageState();
}

class profilePageState extends State<profilePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Container(
child: Column(crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 40,
),DefaultTabController(
length: 2,
child: Column(children: [TabBar(
unselectedLabelColor: Colors.black,
labelColor: Colors.red,
tabs: <Widget>[
Tab(
icon: Icon(Icons.people),
),
Tab(
icon: Icon(Icons.person),
)
],controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),TabBarView(
children: <Widget>[Text('people'), Text('Person')],
controller: _tabController,
),
]),
),
],
),
),
],
),
);
}
}
您可以看到上面的图像模型,这是我想要实现的。我已经尝试了很多事情,但我一直坚持在这里。
如何纠正此错误以及如何在屏幕中心创建标签栏?

最佳答案

我添加了一个关于您想要获得的演示(我跟随了您发布的图片):
注意:我必须对您布置窗口小部件树的方式进行一些更改。

class profilePage extends StatefulWidget {
@override
profilePageState createState() => profilePageState();
}

class profilePageState extends State<profilePage> {

@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text(
'My Profile',
),
centerTitle: true,
backgroundColor: Colors.grey[700].withOpacity(0.4),
elevation: 0,
// give the app bar rounded corners
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
leading: Icon(
Icons.menu,
),
),
body: Column(
children: <Widget>[
// construct the profile details widget here
SizedBox(
height: 180,
child: Center(
child: Text(
'Profile Details Goes here',
),
),
),

// the tab bar with two items
SizedBox(
height: 50,
child: AppBar(
bottom: TabBar(
tabs: [
Tab(
icon: Icon(Icons.directions_bike),
),
Tab(
icon: Icon(
Icons.directions_car,
),
),
],
),
),
),

// create widgets for each tab bar here
Expanded(
child: TabBarView(
children: [
// first tab bar view widget
Container(
color: Colors.red,
child: Center(
child: Text(
'Bike',
),
),
),

// second tab bar viiew widget
Container(
color: Colors.pink,
child: Center(
child: Text(
'Car',
),
),
),
],
),
),
],
),
),
);
}
}
输出:
enter image description here

关于android - 如何在屏幕中心 float 创建标签栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63304112/

28 4 0