只有屏幕的某些部分可滚动时，如何解决“底部溢出”问题 [英] How to fix Bottom Over flow when only some section of screen is scrollable
本文介绍了只有屏幕的某些部分可滚动时，如何解决“底部溢出”问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在顶部有一个图像轮播，只希望屏幕/页面的底部滚动，但始终会导致底部溢出。我该如何解决这个问题……！！
I have an image carousel on top and want only the bottom part of the screen/page to scroll, but keep getting bottom overflow. how do i fix this... please!?
我在不同的地方以及SingleChildScrollView都尝试过ListView，但无济于事。
I have tried ListView at different places aswell as SingleChildScrollView but to no avail.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:homenet/pages/search_page.dart';
import 'package:system_shortcuts/system_shortcuts.dart';
class PropertyDetails extends StatefulWidget {
final propertyDetailImage;
final propertyDetailTown;
final propertyDetailArea;
final propertyDetailStatus;
final propertyDetailPrice;
PropertyDetails(
{this.propertyDetailImage,
this.propertyDetailTown,
this.propertyDetailArea,
this.propertyDetailStatus,
this.propertyDetailPrice}); @override
_PropertyDetailsState createState() => _PropertyDetailsState();
}
class _PropertyDetailsState extends State<PropertyDetails> {
@override
Widget build(BuildContext context) {
// ======== CAROUSEL =========
Widget imageSlider = Container(
height: 200,
child: Carousel(
boxFit: BoxFit.cover,
images: [
AssetImage('assets/images/houses/house.jpg'),
AssetImage('assets/images/houses/house1.jpg'),
AssetImage('assets/images/houses/house2.jpg'),
AssetImage('assets/images/houses/house3.jpg'),
AssetImage('assets/images/houses/house4.jpg'),
],
autoplay: false,
dotBgColor: Colors.transparent,
dotSize: 0,
),
);
final banner = Padding(
padding: EdgeInsets.only(top: 160.0, left: 4.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFFFA983A).withOpacity(.75),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
),
padding: EdgeInsets.all(10.0),
child: Text(
"For Sale",
style: TextStyle(color: Colors.white),
),
),
);
// ======== CAROUSEL =========
return Scaffold(
appBar: AppBar(
backgroundColor: new Color(0xFFFA983A),
title: Image.asset(
'assets/images/logo_white.png',
fit: BoxFit.cover,
),
elevation: 0.0,
centerTitle: true,
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => new SearchPage()));
},
),
],
),
body: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
height: 200,
child: GestureDetector(
child: Hero(
tag: 'carouselHero',
child: SizedBox.expand(
child: Stack(
children: <Widget>[
imageSlider,
banner,
],
),
),
),
onDoubleTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return ImageScreen();
}));
},
),
),
SizedBox(height: 4),
Expanded(
child: Container(
padding: EdgeInsets.only(left: 12.0, top: 4.0, right: 12.0),
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Rehoboth",
style: TextStyle(
color: Color(0xFFFA983A),
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
Text(
"Ref: RBD02548649",
style: TextStyle(
color: Colors.grey,
fontSize: 14.0,
fontWeight: FontWeight.normal),
),
],
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"236 Block D",
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
Text(
"N$ 550,000.00,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.normal,
color: Color(0xFFFA983A)),
),
],
),
SizedBox(
height: 8,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Image.asset(
'assets/images/icons/beds_new.png',
scale: 1.75,
),
Text(" 4"),
SizedBox(
width: 8,
),
Image.asset(
'assets/images/icons/bath_new.png',
scale: 1.75,
),
Text(
" 3",
),
SizedBox(
width: 8,
),
Image.asset(
'assets/images/icons/parking_new.png',
scale: 1.75,
),
Text(" 2"),
],
),
Text(
"1200 sqr ft.",
style: TextStyle(color: Colors.grey),
)
],
),
SizedBox(
height: 4,
),
Divider(
height: 10,
),
SizedBox(
height: 4,
),
// PROPERTY DESCRIPTION ==============================
Text(
'Description',
style: TextStyle(
color: Colors.black.withOpacity(0.8),
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting "
"industry. Lorem Ipsum has been the industry's standard dummy "
"text ever since the 1500s, when an unknown printer took a "
"galley of type and scrambled it to make a type specimen book. "
"It has survived not only five centuries, but also the leap "
"into electronic typesetting, remaining essentially unchanged.",
style: TextStyle(
color: Colors.black.withOpacity(0.6),
fontSize: 16.0,
fontWeight: FontWeight.normal),
),
SizedBox(height: 8),
Divider(height: 10),
Text(
"AMENITIES",
style: TextStyle(
color: Colors.black.withOpacity(0.8),
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 8.0),
// AMENITIES STARTS HERE ===============================
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
SizedBox(
height: 10,
),
Text(
"Home Loan Calculator",
style: TextStyle(
color: Colors.black.withOpacity(0.8),
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
Image.asset("assets/google_map.jpg"),
],
),
),
),
),
)
],
),
);
}
我想添加尽可能多的内容而不会出现底部。请在这方面帮助我。谢谢。
I want to add as much content as i want without the overflow at the the bottom. Please help me in this regard. Thank you.
推荐答案
我设法弄清楚了，我的问题是我把所有东西都包裹在一个只有它的列中屏幕大小的高度，如果内容太多，则不能滚动超出溢出的范围。主体：是带有轮播容器的列。然后，除此之外，所有内容都包裹在一个Flexible-> ListView-> Container->列中，然后是Rows以用于内容的不同样式和位置。
I managed to figure it out, my problem was that i had everything wrapped in a Column which only has its screen size height and not scrollable beyond that giving overflow if the content is to much. body: is a column with a container for the Carousel. Then outside of that Everything is wrapped in a Flexible -> ListView -> Container -> columns and then Rows For the different styling and positioning of content.
这篇关于只有屏幕的某些部分可滚动时，如何解决“底部溢出”问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
