Flutter实现instagram配置文件页面

Question

在下面的代码中，我想制作一个简单的Instagram配置文件页面，我的问题是在Sliver侧添加选项卡和TabBarView，我得到了一些错误

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: InstagramProfile(),
);
}
}

class InstagramProfile extends StatefulWidget {
@override
_InstagramProfileState createState() => _InstagramProfileState();
}
class _InstagramProfileState extends State<InstagramProfile> with TickerProviderStateMixin {
TabController tab;
@override
void initState() {
super.initState();
tab = TabController(length: 4, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.grey[100],
title: Container(
color: Colors.grey[100],
height: 200,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
"Head",
style: TextStyle(color: Colors.black),
),
),
),
),
SliverAppBar(
pinned: true,
backgroundColor: Colors.white,
title: Container(
color: Colors.white,
constraints: BoxConstraints.expand(height: 50),
child: TabBar(
controller: tab,
tabs: [
Tab(text: "Event"),
Tab(text: "History"),
Tab(text: "Page"),
Tab(text: "Group"),
]),
),
),
SliverPadding(
padding: const EdgeInsets.all(0),
sliver: SliverList(
delegate: SliverChildListDelegate([
TabBarView(
controller: tab,
children: [
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
],
),
]),
),
)
],
),
);
}
}

错误：

RenderBox was not laid out: _RenderScrollSemantics#6cf1a relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'

'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 545 pos 12: 'child.hasSize': is not true.
The relevant error-causing widget was: 
SliverList file:///C:/Users/mahdi/AndroidStudioProjects/social_calendar_pro/lib/tabbar.dart:57:21

Answer 1

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: InstagramProfile(),
);
}
}
class InstagramProfile extends StatefulWidget {
@override
_InstagramProfileState createState() => _InstagramProfileState();
}
class _InstagramProfileState extends State<InstagramProfile>
with TickerProviderStateMixin {
TabController tab;
@override
void initState() {
super.initState();
tab = TabController(length: 4, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: CustomScrollView(
shrinkWrap: true,
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.grey[100],
title: Container(
color: Colors.grey[100],
height: 200,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
"Head",
style: TextStyle(color: Colors.black),
),
),
),
),
SliverAppBar(
pinned: true,
title: Container(
// color: Colors.black12,
constraints: BoxConstraints.expand(height: 50),
child: TabBar(controller: tab, tabs: [
Tab(text: "Event"),
Tab(text: "History"),
Tab(text: "Page"),
Tab(text: "Group"),
]),
),
),
SliverPadding(
padding: const EdgeInsets.all(10),
sliver: SliverList(
delegate: SliverChildListDelegate([
Container(
child: TabBarView(
controller: tab,
children: [
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
],
),
height: 600,
)
]),
),
)
],
),
);
}
}

我希望这将为你工作