颤振-如何使水平滚动ListView？
颤振-如何使水平滚动ListView？
提问于 2020-07-08 03:24:52
我想做个这样的设计
为此，我将ListView与scrollDirection: Axis.horizontal结合使用。但是当我这样做的时候，它的错误就像
I/flutter (10948): creator: Column ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector ←
I/flutter (10948): GestureDetector ← _RawMouseRegion ← MouseRegion ← Semantics ← _FocusMarker ← Focus ←
I/flutter (10948): _ActionsMarker ← ⋯
I/flutter (10948): parentData: <none> (can use size)
I/flutter (10948): constraints: BoxConstraints(0.0<=w<=Infinity, h=670.9)
I/flutter (10948): size: MISSING
I/flutter (10948): direction: vertical
I/flutter (10948): mainAxisAlignment: start
I/flutter (10948): mainAxisSize: max
I/flutter (10948): crossAxisAlignment: stretch
I/flutter (10948): verticalDirection: down
I/flutter (10948): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (10948): child 1: RenderClipRRect#e09e3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): child: RenderSemanticsAnnotations#0f760 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): child: RenderImage#fb63b NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10948): child 2: RenderSemanticsAnnotations#7506a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): child: RenderMouseRegion#65e3f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): child: RenderSemanticsGestureHandler#bc45e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): child: RenderPointerListener#4f325 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): child: RenderSemanticsAnnotations#a5b07 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderFlex#5fee9 relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#5e455 relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#38557 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderMouseRegion#7c124 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#19b9e relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#08466 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: _RenderInkFeatures#5baf6 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#6778f relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderPhysicalShape#f8e80 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderPadding#a7738 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#63500 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderPadding#0144b relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#23709 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10948): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 549 pos 12: 'child.hasSize': is not true.
I/flutter (10948): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter (10948): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter (10948): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
I/flutter (10948): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10948): The following assertion was thrown during performLayout():
I/flutter (10948): BoxConstraints forces an infinite width.
I/flutter (10948): These invalid constraints were provided to RenderClipRRect's layout() function by the following
I/flutter (10948): function, which probably computed the invalid constraints in question:
I/flutter (10948): RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:746:15)
I/flutter (10948): The offending constraints were:
I/flutter (10948): BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
I/flutter (10948):
I/flutter (10948): The relevant error-causing widget was:
I/flutter (10948): Column file:///home/myDesk/AndroidStudioProjects/myapp/lib/main.dart:52:18这是我的代码片段
Widget element() {
return Container(
margin: EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network('https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit: BoxFit.fill),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test App'),
),
body: ListView(
scrollDirection: Axis.horizontal,
children: [
element(),
element(),
element(),
],
),
);
}请帮助这里，如果你有一个更好的方法，然后请告诉。提前谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-07-08 03:50:35
您可以复制粘贴，运行下面的完整代码
您可以为Container提供宽度并使用Column
代码段
return Container(
width: 200,
...
Column(
children: [
Container(
height: 250,
child: ListView(
//shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
element(),
element(),
element(),
],
),
),
Divider(
height: 50,
),
Container(
height: 250,
child: ListView( 工作演示
全码
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> {
Widget element() {
return Container(
width: 200,
margin: EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network('https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit: BoxFit.fill),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test App'),
),
body: Column(
children: [
Container(
height: 250,
child: ListView(
//shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
element(),
element(),
element(),
],
),
),
Divider(
height: 50,
),
Container(
height: 250,
child: ListView(
//shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
element(),
element(),
element(),
],
),
),
],
),
);
}
}Stack Overflow用户
发布于 2020-07-08 03:33:18
这个问题正在发生，因为没有提到高度。
listview的父部件应该有一个高度。
您可以将listview包装在容器内，并给容器一个高度。
Container(
height:150,
child: ListView(
.......
)
)Stack Overflow用户
发布于 2020-07-08 15:18:17
ListView类具有属性scrollDirection。把它设为：
scrollDirection: Axis.horizontal页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62787064
复制相关文章
相似问题
腾讯云开发者
