无法滚动
我是新手，我尝试制作可滚动的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, 0, 0),
child: Text(
".",
style: TextStyle(
fontSize: 120,
color: Colors.white,
),
)),
ListView(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
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",
width: 20,
),
Image.asset(
"Assets/img/ajio.png",
width: 20,
),
Image.asset(
"Assets/img/snapdeal.png",
width: 20,
),
Image.asset(
"Assets/img/ss.jpg",
width: 20,
),
],
),
margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
// 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),
borderRadius: BorderRadius.circular(20),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(20),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(20),
),
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.white,
),
color: Colors.black,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
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 information 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),
color: Colors.white,
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, 10, 5, 10),
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, 10, 0),
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, 10, 0, 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",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w900,
),
)
],
),
Container(
margin: EdgeInsets.all(5),
),
FlatButton.icon(
icon: Icon(Icons.show_chart),
color: Colors.black,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(
20, 5, 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],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
)),
],
));
2 个答案:
答案 0 :(得分：1)
您可以在下面复制粘贴运行完整代码
步骤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, 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, 0, 0, 0),
child: Text(
".",
style: TextStyle(
fontSize: 120,
color: Colors.white,
),
)),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
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',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=11',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=12',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=13',
width: 20,
),
],
),
margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
// 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),
borderRadius: BorderRadius.circular(20),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(20),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(20),
),
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.white,
),
color: Colors.black,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
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),
color: Colors.white,
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, 10, 5, 10),
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, 10, 0),
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, 10, 0, 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",
style: TextStyle(
fontSize: 10,
fontWeight:
FontWeight.w900,
),
)
],
),
Container(
margin: EdgeInsets.all(5),
),
FlatButton.icon(
icon:
Icon(Icons.show_chart),
color: Colors.black,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor:
Colors.black,
padding:
EdgeInsets.fromLTRB(
20, 5, 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],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
)),
],
),
),
)),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
});
}
}
答案 1 :(得分：0)
您需要删除容器的高度。
SingleChildScrollView(
child: Container(
child: Stack(
children: <Widget>[
])))
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？