Overflow bawah karena bilah navigasi bawah dan bilah tab
@override
Widget build(BuildContext context) {
super.build(context);
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
),
child: Scaffold(
key: _scaffoldKeyProfilePage,
body: DefaultTabController(
length: 2,
child:RefreshIndicator(
onRefresh: _onRefresh,
child: NestedScrollView(
headerSliverBuilder: (context, _) {
return [
SliverList(
delegate: SliverChildListDelegate(
[ BuildMainProfile(
....//
),
Padding(
...//another design
),
];
},
// You tab view goes here
body: Column(
children: <Widget>[
TabBar(
tabs: [
Tab(text: 'A'),
Tab(text: 'B'),
],
),
Expanded(
child: TabBarView(
children: [
BuildPost(,
),
BuildWings()
],
),
),
],
),
),),
),
}
Di atas adalah contoh kesalahan yang saya dapatkan
kesalahan: RenderFlex meluap sebesar 48 piksel di bagian bawah.
Bagaimana cara mengatasi masalah ini? Mencoba menggunakan diperluas pada TabBar dan memberikan kelenturan 1 ke bilah tab dan kelenturan 10 ke tabView, tetapi dengan bilah tab itu menyusut saat menggulir ke bawah.
Berikut dibawah ini adalah kode untuk tampilan tabBar A dan B bahkan mirip
class BuildPost extends StatefulWidget {
final String uid;
const BuildPost({
Key key,
@required this.uid,
}) : super(key: key);
@override
_BuildPostState createState() => _BuildPostState();
}
class _BuildPostState extends State<BuildPost> {
List<Post> _post = [];
getUsersPost() async {
final database = FirestoreDatabase();
List<Post> _postModel = await database.getUsersPost(widget.uid);
setState(() {
_post = _postModel.toList();
});
}
@override
void initState() {
getUsersPost();
super.initState();
}
@override
Widget build(BuildContext context) {
return _post.isEmpty
? Container(
height: 500,
width: double.infinity,
)
: GestureDetector(
child: Directionality(
textDirection: TextDirection.ltr,
child: AnimationLimiter(
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.all(10),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
itemCount: _post.length,
itemBuilder: (context, index) {
return AnimationConfiguration.staggeredGrid(
position: index,
duration: const Duration(milliseconds: 500),
columnCount: 3,
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
duration: Duration(milliseconds: 1000),
child: BuildData(
totalPost: _post.length,
postList: _post,
index: index,
post: _post[index],
)),
),
);
},
staggeredTileBuilder: (index) => StaggeredTile.count(
index % 7 == 0 ? 2 : 1,
index % 7 == 0 ? (2.1) : (1.05)),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
)),
);
}
}
Jawaban
Itu karena tinggi badan NestedScrollView
adalah dari 0 ke MediaQuery.of (konteks) .size.height, sedangkan TabBar Anda di dalam kolom membuatnya tata letak ketinggian minimal TabBar.
Pindahkan TabBar di dalam pembangun
Dari contoh NestedScrollView , Anda dapat melihat TabBar ada di dalam headerSliverBuilder. Anda cukup memindahkan TabBar di dalamnya (membungkus SliverToBoxAdapter
atau SliverAppBar
membuatnya menjadi sliver).
Kemudian Anda dapat menghapus Column
dan Expand
Widget di atas TabBarView
child: NestedScrollView(
headerSliverBuilder: (context, _) {
return [
SliverList(
...
),
SliverAppBar(
pinned: true,
primary: false, // no reserve space for status bar
toolbarHeight: 0, // title height = 0
bottom: TabBar(
tabs: [
Tab(text: 'A'),
Tab(text: 'B'),
],
),
)
];
}
body: TabBarView(
children: [
...
The body
milik NestedScrollView
mendapat kendala ketinggian ketat sama dengan ruang yang tersisa dengan headerSliverBuilder
(mengingat posisi scroll). Dalam kode Anda, Anda sebagai isi Column
widget dengan tinggi tetap TabBar
widget di sana. Jadi ketika batasan tinggi badan menjadi lebih kecil dari TabBar
ketinggian, itu akan meluap Column
.
Jadi di body
dalamnya, harus ada widget yang bisa menyusut ke ketinggian nol, kemungkinan besar scrollable ( ListView
, CustomScrollView
). Dalam kasus Anda, Anda dapat memindahkan TabBar
ke bagian bawah headerSliverBuilder
, membungkusnya dengan:
SliverPersistentHeader(
pinned: true,
delegate: SimpleHeaderDelegate(
child: TabBar(...),
),
)
menggunakan:
class SimpleHeaderDelegate extends SliverPersistentHeaderDelegate {
SimpleHeaderDelegate({@required this.child});
final PreferredSizeWidget child;
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => child;
@override
double get maxExtent => child.preferredSize.height;
@override
double get minExtent => child.preferredSize.height;
@override
bool shouldRebuild(covariant SimpleHeaderDelegate oldDelegate) => oldDelegate.child != child;
}