下部のナビゲーションバーとタブバーによる下部のオーバーフロー
@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()
],
),
),
],
),
),),
),
}
上記は私がエラーを
受け取っているエラーの例です：RenderFlexは下部の48ピクセルでオーバーフローしました。
この問題を解決するにはどうすればよいですか？TabBarでexpandedを使用して、タブバーに1のフレックス、tabViewに10のフレックスを指定してみましたが、そのタブバーを下にスクロールすると縮小します。
以下はtabBarビュー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,
),
)),
);
}
}
回答
身長があるからであるNestedScrollView0からMediaQuery.of（コンテキスト）.size.heightにあるあなたが、TabBarに塔内には、それがTabBarの最小の高さをレイアウトします。
TabBarをビルダー内に移動します
NestedScrollViewの例から、TabBarがheaderSliverBuilder内にあることがわかります。TabBarをその中に移動するだけです（SliverToBoxAdapterまたはSliverAppBarをラップしてスライバーにします）。
次に、あなたが削除することができますColumnし、Expandウィジェット上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: [
...
の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;
}