Alt gezinme çubuğu ve sekme çubuğu nedeniyle alt taşma
@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()
],
),
),
],
),
),),
),
}

Yukarıdaki hata aldığım hata örneğidir
: Bir RenderFlex altta 48 piksel taşmıştır.
bu sorunu nasıl çözeriz? TabBar'da genişletilmiş kullanarak ve sekme çubuğuna 1 esneklik ve tabView'a 10 esneklik vermeye çalıştım, ancak bu sekme çubuğu aşağı kaydırıldığında küçülür.
Aşağıda, tabBar görünümü A ve B'nin kodu verilmiştir.
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,
),
)),
);
}
}
Yanıtlar
Vücut yüksekliği çünkü öyle NestedScrollView
sizin süre, 0'dan .size.height MediaQuery.of (bağlam) etmektir TabBar kolon marka iç o TabBar minimum yüksekliği düzeni.
TabBar'ı oluşturucuya taşı
NestedScrollView örneğini oluşturduğunuzda, TabBar'ın headerSliverBuilder'ın içinde olduğunu görebilirsiniz. TabBar'ı içine kolayca taşıyabilirsiniz ( şerit yapmak için a SliverToBoxAdapter
veya sarın SliverAppBar
).
Ardından , TabBarView üzerindeki Column
ve Expand
Widget'ı kaldırabilirsiniz.
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
Malı NestedScrollView
sıkı bir yükseklik kısıtlaması tarafından kalan boşluğa eşit alır headerSliverBuilder
(kaydırma konumu göz önünde bulundurarak). Kodunuzda, gövde olarak Column
sabit yüksekliğe ( TabBar
orada) sahip bir widget'a sahipsiniz . Vücudun yüksekliği kısıt daha küçülüyor Yani TabBar
yüksekliği, bu taşar Column
.
Bu yüzden body
, sıfır yüksekliğe kadar küçülebilen, büyük olasılıkla kaydırılabilir ( ListView
, CustomScrollView
) bir widget olmalıdır . Sizin durumunuzda, aşağıdakilerle sararak TabBar
alt kısmına taşıyabilirsiniz headerSliverBuilder
:
SliverPersistentHeader(
pinned: true,
delegate: SimpleHeaderDelegate(
child: TabBar(...),
),
)
kullanma:
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;
}