flutter - 颤振给容器剩余高度
问题描述
Flutter 我有一列我在其中显示小部件。但是有一个问题是容器没有全屏显示,还有一些白色黑色空间。
我的代码
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: mainHeading(podcastInfo.trackName ?? ""),
),
//Group
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
// "Overhaul Media Group",
podcastInfo.artistName,
style: TextStyle(
fontSize: 14,
color: Color(0xFF969696),
fontFamily: "Product Sans",
),
),
),
model.loading
? Container(
height: 150,
child: Center(
child: SpinKitWave(
color: Color(0xffe7ad29),
type: SpinKitWaveType.center),
),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Subscribe button
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: model.isSubscribed
? () {
model.unsubPodcast();
}
: () {
model.subscribePodcast();
},
child: Text(
model.isSubscribed
? "UNSUBSCRIBE"
: "SUBSCRIBE",
style: TextStyle(
color: Colors.white,
),
),
),
///
///Share Button
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: () {
model.sharePodcast();
},
child: Text(
"SHARE",
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
//Body text
Padding(
padding: const EdgeInsets.only(
left: 8, right: 8, bottom: 8),
child: Container(
child: Text(
// "Podcast Overhaul was created to provide you with helpful hints, tips, & strategies you need to help you get the most out of your podcast every episode...ALL in 10 minutes or less.",
model.podcast.description ?? "",
style: TextStyle(
color: Color(0xFFB0ABAB),
fontSize: 15,
fontFamily: "Sogoe UI",
),
),
),
),
///Season
Container(
decoration: BoxDecoration(
color: Color(0xffe7ad29),
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
SizedBox(
height:
MediaQuery.of(context).size.height *
0.02,
),
Container(
width:
MediaQuery.of(context).size.width,
padding: EdgeInsets.only(bottom: 6),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: mainHeading("EPISODES"),
),
Column(
children: model.podcast.episodes
.map<Widget>(
(e) => Container(
width: MediaQuery.of(context)
.size
.width,
padding: EdgeInsets.only(
bottom: 6, top: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: GestureDetector(
onTap: () {
print('test');
print(podcastInfo);
print('debug');
print(e);
Navigator.pushNamed(
context,
'player',
arguments: new PlayerInfo(
item: podcastInfo,
episode: e,
),
);
},
child: mainHeading(e.title),
),
),
)
.toList(),
),
],
),
),
)
],
),
],
),
)
],
),
您可以在屏幕截图中看到它显示的白色空白空间我尝试将我的黄色容器包装在展开中,但它不起作用。我想我可以按高度鞋底,但它会滚动或出现一些相关问题。
解决方案
只需将您的小部件包装在 SingleChildScrollView 中。这应该有效。
SingleChildScrollView(
child: Container(
color:Colors.white,
child:Column(),
),
),
推荐阅读
- google-sheets - 如何将公式添加到已转置的单元格
- android - Gson TypeAdapter 在访问无效字段时是否支持跳过值解析?
- sql - 如何在 PostgreSQL 中的两个表复合键冲突时插入第三个表?
- azure-ad-b2c - 使用 MFA 触发的身份验证器的 B2C“默认”用户流?
- flutter - 如何在图像下显示 2 个按钮的同一行?
- git - git密码中的百分比(%)符号字符
- ios - “您的 Apple ID 未启用 iTunes Connect。” 对于新的付费开发者帐户
- html - 如何在 4x4 网格的中心绘制 y 轴和 x 轴线?
- reactjs - React JS 道具没有更新
- spring-boot - 我从 JSP 切换到 Thymeleaf,怎么了?