नीचे नेविगेशन बार और टैब बार के कारण निचला अतिप्रवाह
@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()
],
),
),
],
),
),),
),
}
ऊपर त्रुटि का उदाहरण है जिसे मुझे
त्रुटि मिल रही है: नीचे की ओर 48 पिक्सल द्वारा एक रेंडरफ्लेक्स ओवरफ्लो हुआ।
इस समस्या को कैसे हल करें? टैबबार पर विस्तारित का उपयोग करने की कोशिश की और 1 से टैब बार का फ्लेक्स और टैब के 10 का फ्लेक्स दिया गया, लेकिन इसके साथ टैब बार स्क्रॉलिंग पर सिकुड़ जाता है।
यहाँ नीचे tabBar view A और B का कोड समान है
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,
),
)),
);
}
}
जवाब
ऐसा इसलिए है क्योंकि के शरीर की ऊंचाई NestedScrollView
, 0 से MediaQuery.of (संदर्भ) .size.height है, जबकि अपनी TabBar स्तंभ मेकअप के अंदर यह TabBar का एक न्यूनतम ऊंचाई लेआउट।
बिल्डर के अंदर TabBar ले जाएँ
NestedScrollView का उदाहरण देखें, आप देख सकते हैं कि TabBar हैडर के अंदर है। आप बस इसके अंदर TabBar को स्थानांतरित कर सकते हैं (इसे पतला बनाने के लिए लपेटें SliverToBoxAdapter
या एक SliverAppBar
)।
तब आप TabBarView के ऊपर Column
और Expand
विजेट को हटा सकते हैं
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: [
...
body
की संपत्ति NestedScrollView
एक तंग ऊंचाई बाधा अंतरिक्ष से बचे के बराबर हो जाता है headerSliverBuilder
(पुस्तक स्थिति पर विचार)। आपके कोड में, आप Column
एक निश्चित ऊँचाई ( TabBar
) में विजेट के साथ एक निकाय के रूप में हैं। इसलिए जब शरीर की ऊँचाई की सीमा ऊँचाई से छोटी हो जाती है TabBar
, तो यह बह निकलेगी Column
।
तो body
, वहाँ एक विजेट होना चाहिए जो शून्य ऊंचाई तक सिकुड़ सकता है, सबसे अधिक संभावना है कि एक स्क्रॉल करने योग्य ( ListView
, CustomScrollView
)। अपने मामले में, आप इसे TabBar
नीचे की ओर ले जा सकते हैं headerSliverBuilder
, इसे इसके साथ लपेटकर:
SliverPersistentHeader(
pinned: true,
delegate: SimpleHeaderDelegate(
child: TabBar(...),
),
)
का उपयोग कर:
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;
}