堆栈小部件内的列表视图不起作用（滚动方向：Axis.vertical）
Posted
技术标签:
【中文标题】堆栈小部件内的列表视图不起作用（滚动方向：Axis.vertical）【英文标题】：Listview inside stack widget is not working ( scrollDirection: Axis.vertical) 【发布时间】：2020-04-16 15:00:20 【问题描述】：我需要做这个设计
这是我的代码结果
但是当我添加列表视图时它不起作用 我需要垂直列表而不是水平列表 ListView.builder( 滚动方向：Axis.vertical， 收缩包装：是的， 项目数：12， itemBuilder：（上下文，索引） return Text("我的小部件卡片将添加到这里"); )
这是我的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyAppNameAppTemplesListing extends StatefulWidget
MyAppNameAppTemplesListing(Key key) : super(key: key);
@override
_MyAppNameAppTemplesListingState createState() =>
_MyAppNameAppTemplesListingState();
class _MyAppNameAppTemplesListingState
extends State<MyAppNameAppTemplesListing>
@override
Widget build(BuildContext context)
return Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height*.4,
),
Container(
height: MediaQuery.of(context).size.height*.14,
color: Colors.pink[100],
),
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Temples",style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold),),
),
),
Positioned(
top: 55,
child: Padding(
padding: const EdgeInsets.only(left: 4,right: 4),
child:
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 50.0,
width: MediaQuery.of(context).size.width*.97,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: Container(
margin: EdgeInsets.only(left: MediaQuery.of(context).size.width*.4),
child: new Text("Favourite",style: TextStyle(fontSize: 16, color: Colors.grey,fontWeight: FontWeight.bold),)),
)),
),
Container(
height: 50.0,
width: MediaQuery.of(context).size.width*.5,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Colors.pink[800],
Colors.pink[700],
Colors.red[600],
Colors.red[400],
],
),
color: Colors.redAccent[100],
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: new Text("ALL",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
)),
),
],
),
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context,index)
return Text("my widget card will add here");
)
],
),
),
),
],
);
【问题讨论】：
【参考方案1】：你必须将 listview 包装在一个容器或 sizedbox 中..
Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context,index)
return Text("my widget card will add here");
),
),
如果列表仍然没有出现，请尝试在容器上提供height 和width。
【讨论】：
══════ (11) 渲染库捕获异常═════════════════════════════ ════════════════════ RenderBox未布局：RenderRepaintBoundary#dee4e relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering /box.dart'：断言失败：第 1695 行 pos 12：'hasSize' 相关的导致错误的小部件是：列文件：///Users/apple/Documents/namApp/devaayanam_app_temples_listing.dart:36:13 ════ ══════════════════════════════════════════════════ ══════════════════════════════════════════════重新加载632的13库在 2,395 毫秒内。 我需要垂直而不是水平 ════════（11）渲染库捕获的异常═══════════════════════════ ══════════════════════ RenderBox未布局：RenderRepaintBoundary#89d48 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src /rendering/box.dart'：断言失败：第 1695 行第 12 行：'hasSize'【参考方案2】：您需要将ListView.builder 包装在Positioned 小部件中并为其提供所有参数。
例子：
Positioned(
top: 0,
bottom: 0,
left: 0,
right: 0,
child: ListView(),
),
这将占用 Stack 父级的完整大小。
【讨论】：
【参考方案3】：您需要为可水平滚动的小部件定义固定高度。 请尝试使用具有定义高度的容器或大小的框来包装您的列表视图。
Container(
height: MediaQuery.of(context).size.height*0.3,
// height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 12,
itemBuilder: (context,index)
return Text("my widget card will add here");
),
)
【讨论】：
════════ (11) 渲染库捕获的异常══════════════════════════ ══════════════════════ RenderBox未布局：RenderRepaintBoundary#89d48 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src /rendering/box.dart'：断言失败：第 1695 行第 12 行：'hasSize' 如果您需要垂直，只需在容器中添加宽度而不是上面代码中的高度。【参考方案4】：首先，您确实需要优化您的小部件。你可以有 以更简单的方式实现了设计。
现在，您对当前的小部件设计模式犯了一个小错误。您需要将Stack() 包装在Column() 下，并将ListView() 从Stack() 移动并使其成为Column() 的第二个孩子，它应该可以工作。
完整源代码：
Column(children: <Widget>[
Stack(children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * .4,
),
Container(
height: MediaQuery.of(context).size.height * .14,
color: Colors.pink[100],
),
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Temples",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
),
Positioned(
top: 95,
child: Padding(
padding: const EdgeInsets.only(left: 4, right: 4),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 50.0,
width: MediaQuery.of(context).size.width * .97,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: Container(
margin: EdgeInsets.only(
left:
MediaQuery.of(context).size.width *
.4),
child: new Text(
"Favourite",
style: TextStyle(
fontSize: 16,
color: Colors.grey,
fontWeight: FontWeight.bold),
)),
)),
),
Container(
height: 50.0,
width: MediaQuery.of(context).size.width * .5,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Colors.pink[800],
Colors.pink[700],
Colors.red[600],
Colors.red[400],
],
),
color: Colors.redAccent[100],
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: new Text(
"ALL",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
)),
),
],
),
],
),
),
),
]),
ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context, index)
return Text("my widget card will add here");
)
])
【讨论】：
【参考方案5】：是的，用容器包装列表视图，但还在调用图像和图像描述数据的小部件之前添加宽度和边距：EdgeInsects.only(left: 10.0)。
【讨论】：
【参考方案6】：当滚动方向设置为水平时，我遇到了同样的问题，然后遇到了问题，
我通过设置listview父小部件的容器宽度和高度解决了这个问题，现在工作正常
【讨论】：
【参考方案7】：是的，我也是面临这个问题的人！
使用Expanded() 作为Stack() 的每个孩子的父母。
【讨论】：
以上是关于堆栈小部件内的列表视图不起作用（滚动方向：Axis.vertical）的主要内容，如果未能解决你的问题，请参考以下文章
QPlainTextEdit 内的 QGraphicsView（可滚动小部件）