问题描述
我是新手，我尝试制作可滚动的UI。
我尝试添加Expanded窗口小部件，ListViews窗口小部件，SingleChildScrollView窗口小部件，但是没有得到预期的结果。
此外，我尝试将堆栈包装在Container中，然后再包装在SingleChildScrollView中。但这会引发错误。
我尝试了很多方面来使主页可滚动。但是，我遇到了错误（以下提到）
I/Flutter ( 6259): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#e1279 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I / Flutter（6259）：引发了另一个异常：未布置RenderBox：_RenderColoredBox＃89cc6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I / Flutter（6259）：引发了另一个异常：未布置RenderBox：RenderRepaintBoundary＃9505f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I / Flutter（6259）：引发了另一个异常：'package：Flutter / src / rendering / sliver_multi_Box_adaptor.dart'：断言失败：549行pos 12：'child.hasSize'：不正确。
GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
new TextEditingController().clear();
},child: Stack(
children: <Widget>[
Container(
height: 200,child: TopBar(),),Container(
margin: EdgeInsets.only(top: 55),child: Text(
"PriceTrackers",style: TextStyle(
color: Colors.white,fontSize: 50.0,fontWeight: FontWeight.w900,Container(
margin: EdgeInsets.fromLTRB(265,0),child: Text(
".",style: TextStyle(
fontSize: 120,color: Colors.white,)),ListView(
padding: EdgeInsets.fromLTRB(10,10,children: <Widget>[
Container(
margin: EdgeInsets.only(top: 200),child: Form(
key: _formKey,child: Column(children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
Icon(Icons.store),Text(
"Supported Store",style: TextStyle(
fontSize: 20,color: Colors.green,Image.asset(
"Assets/img/amazon.png",width: 20,Image.asset(
"Assets/img/flipkart.png",Image.asset(
"Assets/img/ajio.png",Image.asset(
"Assets/img/snapdeal.png",Image.asset(
"Assets/img/ss.jpg",],margin: EdgeInsets.fromLTRB(40,40,10),decoration: Boxdecoration(
borderRadius: BorderRadius.circular(10),// BoxShadow: [
// BoxShadow(color: Colors.white,spreadRadius: 3),// ],// Add TextFormFields and RaisedButton here.
TextFormField(
controller: _controller,enableInteractiveSelection: true,textInputAction: TextInputAction.done,decoration: Inputdecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),borderRadius: BorderRadius.circular(20),enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,hintText: "Enter Product URL",suffixIcon: Icon(Icons.search),// onFieldSubmitted: (term){
// FocusScope.of(context).unfocus();
// _controller.clear();
// },showCursor: true,autofocus: false,// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
} else if (!value.contains("amazon") ||
!value.contains("flipkart") ||
!value.contains("myntra")) {
return "Please Enter Supported Store URL";
}
return null;
},RaisedButton.icon(
icon: Icon(
Icons.search,color: Colors.black,padding: EdgeInsets.fromLTRB(10,elevation: 20.0,onpressed: () async {
// Validate returns true if the form is valid,otherwise false.
if (_formKey.currentState.validate()) {
setState(() {
createalbum(_controller.text).then((value) => {
Navigator.push(
context,EnterExitRoute(
exitPage: HomePage(),enterPage: LineChartSample2(
getData: value)))
});
});
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
'Processing Data',style: TextStyle(color: Colors.white),backgroundColor: Colors.green,));
// If the form is valid,display a snackbar. In the real world,// you'd often call a server or save the @R_442_4045@ion in a database.
// Navigator.push(
// context,// MaterialPageRoute(builder: (context) => LineChartSample2()),// );
}
},label: Text(
'View Price Graph',style: TextStyle(
color: Colors.white,Container(
margin: EdgeInsets.only(top: 20),width: 380,height: 200,decoration: Boxdecoration(
borderRadius: BorderRadius.circular(20),BoxShadow: [
BoxShadow(
color: Colors.blue[200],blurRadius: 25.0,// soften the shadow
spreadRadius: 5.0,//extend the shadow
offset: Offset(
15.0,// Move to right 10 horizontally
15.0,// Move to bottom 10 Vertically
),)
],child: Row(
children: <Widget>[
Container(
width: 130,height: 130,padding: EdgeInsets.fromLTRB(5,5,child: FadeInImage(
fit: BoxFit.scaleDown,// here `bytes` is a Uint8List containing the bytes for the in-memory image
placeholder: Assetimage("Assets/img/bag.png"),image: NetworkImage(
'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),Expanded(
child: Container(
padding: EdgeInsets.fromLTRB(0,20,child: Column(
children: <Widget>[
Text(
"Redux Analogue Blue Dial Men’s &S... ",maxLines: 2,softWrap: true,style: TextStyle(
fontSize: 20,fontWeight: FontWeight.w400,color: Colors.black),Container(
margin: EdgeInsets.fromLTRB(0,child: Column(
children: <Widget>[
OutlineButton.icon(
onpressed: () => {},icon: Icon(Icons.shopping_basket),label: Text("But Now @28939")),Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,children: <Widget>[
Text(
"Avg Price : 7,98,374",style: TextStyle(
fontSize: 10,Text(
"Avg Price :34,43,343",)
],Container(
margin: EdgeInsets.all(5),FlatButton.icon(
icon: Icon(Icons.show_chart),textColor: Colors.white,disabledColor: Colors.grey,disabledTextColor: Colors.black,padding: EdgeInsets.fromLTRB(
20,5),splashColor: Colors.blueAccent,onpressed: () {
/*...*/
},label: Text(
"Show Price Graph",style: TextStyle(fontSize: 15.0),)
],))
],])),Container(
margin: EdgeInsets.only(top: 650),child: GridView.count(
primary: false,padding: const EdgeInsets.all(20),crossAxisspacing: 10,mainAxisspacing: 10,crossAxisCount: 2,children: <Widget>[
Container(
padding: const EdgeInsets.all(8),child: const Text("He'd have you all unravel at the"),color: Colors.teal[100],Container(
padding: const EdgeInsets.all(8),child: const Text('Heed not the rabble'),color: Colors.teal[200],child: const Text('Sound of screams but the'),color: Colors.teal[300],child: const Text('Who scream'),color: Colors.teal[400],child: const Text('Revolution is coming...'),color: Colors.teal[500],child: const Text('Revolution,they...'),color: Colors.teal[600],));
解决方法
您可以在下面复制粘贴运行完整代码
步骤1：使用LayoutBuilder和ConstrainedBox
return LayoutBuilder(builder: (context,constraints) {
...
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: double.infinity),child: Stack(
步骤2：将ListView更改为Column
Padding(
padding: EdgeInsets.fromLTRB(10,10,0),child: Column(
第3步：GridView使用shrinkWrap: true
工作演示
完整代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: MyHomePage(title: 'Flutter Demo Home Page'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context,constraints) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),body: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
TextEditingController().clear();
},child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: double.infinity),child: Stack(
children: <Widget>[
Container(
height: 200,child: Text("TopBar()"),Container(
margin: EdgeInsets.only(top: 55),child: Text(
"PriceTrackers",style: TextStyle(
color: Colors.black,fontSize: 50.0,fontWeight: FontWeight.w900,Container(
margin: EdgeInsets.fromLTRB(265,child: Text(
".",style: TextStyle(
fontSize: 120,color: Colors.white,)),Padding(
padding: EdgeInsets.fromLTRB(10,child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 200),child: Form(
//key: _formKey,child: Column(children: <Widget>[
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,children: <Widget>[
Icon(Icons.store),Text(
"Supported Store",style: TextStyle(
fontSize: 20,color: Colors.green,Image.network(
'https://picsum.photos/250?image=9',width: 20,Image.network(
'https://picsum.photos/250?image=10',Image.network(
'https://picsum.photos/250?image=11',Image.network(
'https://picsum.photos/250?image=12',Image.network(
'https://picsum.photos/250?image=13',],margin: EdgeInsets.fromLTRB(40,40,10),decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),// boxShadow: [
// BoxShadow(color: Colors.white,spreadRadius: 3),// ],// Add TextFormFields and RaisedButton here.
TextFormField(
//controller: _controller,enableInteractiveSelection: true,textInputAction: TextInputAction.done,decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),borderRadius: BorderRadius.circular(20),enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,hintText: "Enter Product URL",suffixIcon: Icon(Icons.search),// onFieldSubmitted: (term){
// FocusScope.of(context).unfocus();
// _controller.clear();
// },showCursor: true,autofocus: false,// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
} else if (!value.contains("amazon") ||
!value.contains("flipkart") ||
!value.contains("myntra")) {
return "Please Enter Supported Store URL";
}
return null;
},RaisedButton.icon(
icon: Icon(
Icons.search,color: Colors.black,padding: EdgeInsets.fromLTRB(10,elevation: 20.0,onPressed: () async {
// Validate returns true if the form is valid,otherwise false.
},label: Text(
'View Price Graph',style: TextStyle(
color: Colors.white,Container(
margin: EdgeInsets.only(top: 20),width: 380,height: 200,decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),boxShadow: [
BoxShadow(
color: Colors.blue[200],blurRadius: 25.0,// soften the shadow
spreadRadius: 5.0,//extend the shadow
offset: Offset(
15.0,// Move to right 10 horizontally
15.0,// Move to bottom 10 Vertically
),)
],child: Row(
children: <Widget>[
Container(
width: 130,height: 130,padding:
EdgeInsets.fromLTRB(5,5,child: FadeInImage(
fit: BoxFit.scaleDown,// here `bytes` is a Uint8List containing the bytes for the in-memory image
placeholder: NetworkImage(
"https://picsum.photos/250?image=9"),image: NetworkImage(
'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),Expanded(
child: Container(
padding:
EdgeInsets.fromLTRB(0,20,child: Column(
children: <Widget>[
Text(
"Redux Analogue Blue Dial Men’s &S... ",maxLines: 2,softWrap: true,style: TextStyle(
fontSize: 20,fontWeight: FontWeight.w400,color: Colors.black),Container(
margin: EdgeInsets.fromLTRB(
0,child: Column(
children: <Widget>[
OutlineButton.icon(
onPressed: () => {},icon: Icon(Icons
.shopping_basket),label: Text(
"But Now @28939")),Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,children: <Widget>[
Text(
"Avg Price : 7,98,374",style: TextStyle(
fontSize: 10,fontWeight:
FontWeight.w900,Text(
"Avg Price :34,43,343",)
],Container(
margin: EdgeInsets.all(5),FlatButton.icon(
icon:
Icon(Icons.show_chart),textColor: Colors.white,disabledColor: Colors.grey,disabledTextColor:
Colors.black,padding:
EdgeInsets.fromLTRB(
20,5),splashColor:
Colors.blueAccent,onPressed: () {
/*...*/
},label: Text(
"Show Price Graph",style: TextStyle(
fontSize: 15.0),)
],))
],])),Container(
margin: EdgeInsets.only(top: 650),child: GridView.count(
shrinkWrap: true,primary: false,padding: const EdgeInsets.all(20),crossAxisSpacing: 10,mainAxisSpacing: 10,crossAxisCount: 2,children: <Widget>[
Container(
padding: const EdgeInsets.all(8),child: const Text(
"He'd have you all unravel at the"),color: Colors.teal[100],Container(
padding: const EdgeInsets.all(8),child: const Text('Heed not the rabble'),color: Colors.teal[200],child: const Text('Sound of screams but the'),color: Colors.teal[300],child: const Text('Who scream'),color: Colors.teal[400],child: const Text('Revolution is coming...'),color: Colors.teal[500],child: const Text('Revolution,they...'),color: Colors.teal[600],floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),);
});
}
}
您需要删除容器的高度。
SingleChildScrollView(
child: Container(
child: Stack(
children: <Widget>[
])))