我試圖在頁面視圖中放置一個串列視圖，以便我可以在頁面之間水平滑動并在每個頁面上垂直滾動（因為是串列視圖）。但是，存在以下問題。
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was:
PageView PageView:file:///C:/Users/MEL/Desktop/Universidad/Desarrollo Movil/weather/lib/View/home.dart:46:30
When the exception was thrown, this was the stack:
#0 RenderViewport.computeDryLayout.<anonymous closure>
代碼如下
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:weather/Data/Remote/weather_client.dart';
import 'package:weather/View/Widgets/home_widgets.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: LayoutBuilder(
builder: (BuildContext ctx, BoxConstraints constraints) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: IconButton(
onPressed: () async {
var client =
OpenWeatherWapClient('e716074c196d8c560f0b61f6ea416f30');
client.fetchWeatherCity('Tokyo');
},
icon: const Icon(CupertinoIcons.search),
),
),
body: Stack(
children: [
Image.asset('Assets/night.jpg',
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity),
Column(
children: [
Container(
height: constraints.maxHeight * 0.175,
),
PageView.builder(
itemBuilder: (ctx, i) => WeatherCityItem(constraints: constraints)),
],
),
],
),
);
},
),
);
}
}
檔案所在
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class WeatherStatisticItem extends StatefulWidget {
var constraints;
WeatherStatisticItem({Key? key, this.constraints}) : super(key: key);
@override
State<WeatherStatisticItem> createState() => _WeatherStatisticItemState();
}
class _WeatherStatisticItemState extends State<WeatherStatisticItem> {
@override
Widget build(BuildContext context) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
height: 200,
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Row(
children: [
Icon(
CupertinoIcons.thermometer,
color: Colors.white.withOpacity(0.08),
),
Text(
"HUMIDITY",
style: GoogleFonts.inter(
fontSize: widget.constraints.maxWidth * 0.035,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white.withOpacity(0.35)),
),
],
),
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"11°",
style: GoogleFonts.inter(
fontSize: widget.constraints.maxWidth * 0.075,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
)
],
),
Text(
"Simlar to the actual temperature",
style: GoogleFonts.inter(
fontSize: widget.constraints.maxWidth * 0.04,
fontWeight: FontWeight.w300,
letterSpacing: 0.001,
color: Colors.white),
),
],
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white10),
color: Colors.black54.withOpacity(0.25),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
),
);
}
}
class WeatherCityItem extends StatelessWidget {
var constraints;
WeatherCityItem({Key? key, this.constraints}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: ListView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(
vertical: 0, horizontal: 20),
children: [
Column(
children: [
Container(
alignment: Alignment.center,
child: Text(
"Bogotá",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.11,
fontWeight: FontWeight.w300,
color: Colors.white),
),
),
Text(
"11°",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.175,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(CupertinoIcons.clock,
color: Colors.white),
Container(
width: constraints.maxWidth * 0.0175,
),
Text(
"11:18 pm",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.05,
fontWeight: FontWeight.w300,
letterSpacing: 0.001,
color: Colors.white),
),
],
),
Container(
height: constraints.maxHeight * 0.075,
)
],
),
Container(
padding: const EdgeInsets.symmetric(
vertical: 15, horizontal: 10),
child: Column(
children: [
Align(
child: Text(
"Weather report",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.055,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
alignment: Alignment.centerLeft,
),
const Align(
alignment: Alignment.centerRight,
child: Divider(
color: Colors.white54,
),
),
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis risus orci, non consequat nulla pulvinar",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.04,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
],
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white10),
color: Colors.black54.withOpacity(0.25),
borderRadius:
BorderRadius.all(Radius.circular(20)),
),
),
Row(
children: [
WeatherStatisticItem(constraints: constraints),
WeatherStatisticItem(constraints: constraints),
],
),
Row(
children: [
WeatherStatisticItem(constraints: constraints),
WeatherStatisticItem(constraints: constraints),
],
),
Row(
children: [
WeatherStatisticItem(constraints: constraints),
WeatherStatisticItem(constraints: constraints),
],
)
],
),
);
}
}
我在互聯網上做了一些研究，它的解決方法似乎是向串列視圖添加一個固定大小的框，但這不起作用。
uj5u.com熱心網友回復：
在 ur 中Stack，你應該包裹一個Expandedto ListView，否則它不知道它的高度。
順便說一句，如果你需要背景圖片，你可以將 a 包裹Container到 urColumn并設定它的
裝飾->影像。然后你可以洗掉 ur Stack。
一些代碼
body: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('Assets/night.jpg')),
),
child: Column(
children: [
Container(
height: constraints.maxHeight * 0.175,
),
Expanded(
child: PageView.builder(
itemBuilder: (ctx, i) => WeatherCityItem(constraints: constraints),
),
),
],
),
),
不要忘記Expanded在 ur 中洗掉WeatherCityItem。
小部件PageView，默認最大寬度，在本例中為 screenWidth。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/354850.html