【发布时间】：2021-08-07 00:16:43
【问题描述】：
我在 Flutter 应用程序中收到 A RenderFlex overflowed by 1.9 pixels on the bottom 错误。
我将所有 ROW 包装在 Expanded 中，并将主 Column 包装在 SingleChildScrollView 中，但仍然存在问题。正如您从屏幕截图中看到的那样，底部的视图向上滚动。顶部的项目在离开屏幕时会向下挤压。我什至不确定是哪一行导致了问题？
更新：
现在看到了。
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 2) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Semantics widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
Column ← Expanded ← Semantics ← Align ← ConstrainedBox ← Container ← LayoutBuilder ← DefaultTextStyle ← Align ← Transform ← ⋯
import 'package:animation_wrappers/animation_wrappers.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:qvid/BottomNavigation/Explore/explore_page.dart';
import 'package:qvid/Components/profile_page_button.dart';
import 'package:qvid/Components/row_item.dart';
import 'package:qvid/Components/sliver_app_delegate.dart';
import 'package:qvid/Components/tab_grid.dart';
import 'package:qvid/Locale/locale.dart';
import 'package:qvid/Routes/routes.dart';
import 'package:qvid/BottomNavigation/MyProfile/followers.dart';
import 'package:qvid/Theme/colors.dart';
import 'package:qvid/BottomNavigation/MyProfile/following.dart';
class UserProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return UserProfileBody();
}
}
class UserProfileBody extends StatefulWidget {
@override
_UserProfileBodyState createState() => _UserProfileBodyState();
}
class _UserProfileBodyState extends State<UserProfileBody> {
bool isFollowed = false;
var followText;
final key = UniqueKey();
@override
Widget build(BuildContext context) {
var locale = AppLocalizations.of(context);
return Scaffold(
backgroundColor: darkColor,
body: DefaultTabController(
length: 2,
child: SafeArea(
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 400.0,
floating: false,
actions: <Widget>[
PopupMenuButton(
color: backgroundColor,
icon: Icon(
Icons.more_vert,
color: secondaryColor,
),
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide.none),
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text(locale!.report!),
value: locale.report,
textStyle: TextStyle(color: secondaryColor),
),
PopupMenuItem(
child: Text(locale.block!),
value: locale.block,
textStyle: TextStyle(color: secondaryColor),
),
];
},
)
],
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
children: <Widget>[
Spacer(flex: 10),
FadedScaleAnimation(
child: CircleAvatar(
radius: 28.0,
backgroundImage:
AssetImage('assets/user/user1.png'),
),
),
Spacer(),
Expanded(
flex: 2,
child: Row(
children: [
Spacer(flex: 12),
Text(
'Emili Williamson',
style: TextStyle(fontSize: 16),
),
Spacer(),
Image.asset(
'assets/icons/ic_verified.png',
scale: 4,
),
Spacer(flex: 8),
],
),
),
Text(
'@emilithedancer',
style:
TextStyle(fontSize: 10, color: disabledTextColor),
),
Spacer(),
FadedScaleAnimation(
child: Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ImageIcon(
AssetImage(
"assets/icons/ic_fb.png",
),
color: secondaryColor,
size: 10,
),
SizedBox(
width: 15,
),
ImageIcon(
AssetImage("assets/icons/ic_twt.png"),
color: secondaryColor,
size: 10,
),
SizedBox(
width: 15,
),
ImageIcon(
AssetImage("assets/icons/ic_insta.png"),
color: secondaryColor,
size: 10,
),
],
),
),
),
Spacer(),
Text(
locale!.comment7!,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10, fontWeight: FontWeight.w500),
),
Spacer(),
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ProfilePageButton(
locale.message,
() => Navigator.pushNamed(
context, PageRoutes.chatPage)),
SizedBox(width: 16),
isFollowed
? ProfilePageButton(locale.following, () {
setState(() {
isFollowed = false;
});
})
: ProfilePageButton(
locale.follow,
() {
setState(() {
isFollowed = true;
});
},
color: mainColor,
textColor: secondaryColor,
),
],
),
),
Spacer(),
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RowItem(
'1.2m',
locale.liked,
Scaffold(
appBar: AppBar(
title: Text('Liked'),
),
body: TabGrid(
food + lol,
),
)),
RowItem('12.8k', locale.followers, FollowersPage()),
RowItem('1.9k', locale.following, FollowingPage()),
],
),
),
],
)),
),
),
SliverPersistentHeader(
delegate: SliverAppBarDelegate(
TabBar(
labelColor: mainColor,
unselectedLabelColor: lightTextColor,
indicatorColor: transparentColor,
tabs: [
Tab(icon: Icon(Icons.dashboard)),
Tab(
icon: ImageIcon(AssetImage(
'assets/icons/ic_like.png',
)),
),
],
),
),
pinned: true,
),
];
},
body: TabBarView(
children: <Widget>[
FadedSlideAnimation(
child: TabGrid(dance),
beginOffset: Offset(0, 0.3),
endOffset: Offset(0, 0),
slideCurve: Curves.linearToEaseOut,
),
FadedSlideAnimation(
child: TabGrid(food + lol),
beginOffset: Offset(0, 0.3),
endOffset: Offset(0, 0),
slideCurve: Curves.linearToEaseOut,
),
],
),
),
),
),
);
}
}
【问题讨论】：
-
scrollDirection: Axis.horizontal,在您的SingleChildScrollView内？是错字吗？ -
是的，但是当我将其更改为 Axis.vertical 时，应用程序会一直暂停，并显示“主要隔离在调试器中已暂停。”
-
一旦我遇到这个问题，我用
fittedBox包裹了 -
@jdog 重新启动会比修复它更快。该代码几乎唯一正确的是
NestedScrollView的body:是TabBarView。我的建议是在阅读文档并了解如何使用 Slivers/ScrollViews 之后重新制作这个小部件。相信我，这会更容易。为了让您知道我不只是刻薄，这里有几个问题需要考虑： -
@jdog 为什么你的
TabBar在SliverPersistentHeader里面headerSliverBuilder:，而不是在你SliverAppBar的bottom:字段中？为什么你在SingleChildScrollView中直接有Expanded小部件？他们如何知道何时停止扩张？为什么你的FlexibleSpaceBar里面有一个SingleChildScrollView？如果您只想向上拖动底部小部件，为什么不使用DraggableScrollableSheet而不是NestedScrollView？