android - 列表视图中的颤振列表视图不滚动
问题描述
作为我的第一个 Flutter 项目,我正在为报纸构建一个应用程序。有许多新闻类别。对于这些类别,我Widget
在主屏幕中创建了一个通用的,Widget
将在 a 中的多个类别中多次显示,当我从这些类别中带来多个新闻时Listview
,这些类别Widgets
也包含在其中。具有此泛型Listview
的类将在下面给出。Widget
Widget
Newsfeed.dart
这个泛型Widget
是从另一个Widget
类调用的,该类WidgetFactory.dart
实际上调用 API 并使用上面提到Widget
的类别泛型来构建主屏幕。此类使用Listview.builder
which is inside FutureBuilder
。
问题是,当我在屏幕上打开应用程序时,会出现新闻但我无法滚动,它保持不变。我检查了 API 是否真的带来了新闻,在控制台中我打印了 API 响应,所有的新闻都被获取了,但我仍然无法滚动。
流程是main.dart -> WidgetFactory() -> Newsfeed()
小部件工厂()
class WidgetFactory extends StatefulWidget {
@override
_WidgetFactoryState createState() => _WidgetFactoryState();
}
class _WidgetFactoryState extends State<WidgetFactory> {
List homeScreenCategories = [4, 14, 13, 23, 8015, 22];
Future<List> newsPostList;
List<List<NewsPost>> categoryNewsPostList;
@override
void initState() {
super.initState();
newsPostList = fetchNews();
}
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Container(
alignment: Alignment.center,
child: Container(
child: RefreshIndicator(
child: FutureBuilder(
future: newsPostList,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if(snapshot.data == null) {
return Container(
child: CircularProgressIndicator()
);
} else {
return ListView.builder(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return _getCategoryNews(snapshot, index);
},
);
}
},
),
onRefresh: () {
fetchNews();
}
),
),
);
}
Future<List> fetchNews() async {
String url = "url";
Response response = await Dio().get(url);
if(response.statusCode == 200) {
List newsPostList = [];
for(int i=0; i<response.data.length; i++) {
newsPostList.add(response.data[i]);
}
return newsPostList;
} else {
throw Exception("Failed to fetch category");
}
}
Widget _getCategoryNews(snapshot, int index) {
List<NewsPost> newsPostList = [];
for(var c in snapshot.data[index]['items']) {
NewsPost newsPost = NewsPost.getNewsPostFromAPI(c);
newsPostList.add(newsPost);
}
return Newsfeed(newsPostList, "National");
}
}
新闻提要()
class Newsfeed extends StatefulWidget {
String categoryName;
List<NewsPost> newsPostList;
Newsfeed(this.newsPostList, this.categoryName);
@override
_NewsfeedState createState() => _NewsfeedState(this.newsPostList, this.categoryName);
}
class _NewsfeedState extends State<Newsfeed> {
final GlobalKey<ScaffoldState> _scaffoldKeyTwo = new GlobalKey<ScaffoldState>(debugLabel: '_MainScreenKey');
String categoryName;
_NewsfeedState(this.newsPostList, this.categoryName);
List<NewsPost> newsPostList;
var dio = new Dio();
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Container(
alignment: Alignment.center,
child: ListView.builder(
shrinkWrap: true,
itemCount: newsPostList.length,
itemBuilder: (BuildContext context, int index) {
print(newsPostList[index]);
return _getNewsPostWidgets(index);
}
),
);
}
Widget _getNewsPostWidgets(int index) {
var newsPost = newsPostList[index];
if(index < 5) {
if(index == 0) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
ScaleTransitionRoute(
page: NewsPostDetails(newsPostList, index)
)
);
},
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
//constraints: BoxConstraints(minWidth: double.infinity, maxWidth: double.infinity),
constraints: BoxConstraints.expand(
width: double.infinity,
height: 40
),
color: const Color(0xFF2b4849),
child: Text(
this.categoryName,
style: TextStyle(
fontSize: 33,
color: Colors.white
),
),
),
BlockHeadline(newsPost)
],
)
);
}
else {
return GestureDetector(
onTap: () {
Navigator.push(
context,
ScaleTransitionRoute(
page: NewsPostDetails(newsPostList, index)
)
);
},
child: ListedNews(newsPost),
);
}
}
else {
return Container(
color: const Color(0xFF2b4849),
child: index == 5 ? FlatButton(
child: Text(
"See More",
style: TextStyle(
color: Colors.white
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => NewsFeedForSpecificCategory(newsPostList)
)
);
},
) : Container(),
);
}
}
openNewsPostDetails(List<NewsPost> newsPostList, int index) {
Navigator.push(
context,
ScaleTransitionRoute(
page: NewsPostDetails(newsPostList, index)
)
);
}
}
我试过的
我发现了一些与这个问题有关的问题。试过那些。
- 我用
shrinkwrap=true
在我的Listview.builder
,但没用。 Column
用inside试过了SingleChildScrollView()
,还是不行。- 里面
Listview.builder
加了physics
asAlwaysScrollable()
,也是白费。
因为我是新手,所以我尝试过的东西可能看起来很愚蠢。
另一件事是,显示在主屏幕上的新闻将我带到详细信息页面,并且向左向右滑动也将我带到其他新闻。引起麻烦的是主屏幕,而不是滚动。
如果您能提供一些线索,那将是很大的帮助。
解决方案
我已经找到了解决这个问题的方法。其实很简单。
在build()
我的课堂方法中,我_NewsfeedState
添加ClampingScrollPhysics()
了physics
.
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Container(
alignment: Alignment.center,
child: ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: newsPostList.length,
itemBuilder: (BuildContext context, int index) {
print(newsPostList[index]);
return _getNewsPostWidgets(index);
}
),
);
}
有效。
推荐阅读
- c# - 使用 Windows 10 更新后,带有 Angular 应用程序的 ASP.NET Core 出现故障 (KB5003637)
- soapui - 如何在外部应用程序的soap客户端和SoapUI工具之间进行通信
- python - Python线程生命周期和处理
- xml - 如何使用 cmd 在 xml 文件的特定区域插入新的文本行?
- java-8 - Java8 方法链
- django - 仅使用卡号 Visa/MasterCard 等进行支付集成 | 没有 Stripe,没有 Paypal,没有 PayTm,没有 RazorPay 等
- image-processing - 通过两个循环计算两个图像之间的 MSE
- reactjs - 使用反应组件作为值导出键/值对象的打字稿
- r - 将第一行变成一列
- python - 结合 WHEN 和聚合函数