flutter - Flutter 网格视图滚动到底部
问题描述
我有一个屏幕GridView
。当我移动到这个页面时,我有GridView
项目计数,我想打开这个页面并GridView
从底部开始显示。现在我做
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_parameters.scrollToBottom && _controller.hasClients) {
_controller.jumpTo(_controller.position.maxScrollExtent);
}
});
但我认为这不是做到这一点的好方法。我可以通过其他方式做到这一点吗?
解决方案
这是另一种方式。请试试这个。
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@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> {
final ScrollController gridScrollController = ScrollController();
List<String> images = [
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",
];
@override
void initState() {
super.initState();
/*Or you can also use Timer*/
// Timer(
// Duration(seconds: 1),
// () => gridScrollController
// .jumpTo(gridScrollController.position.maxScrollExtent),
// );
Future.delayed(const Duration(milliseconds: 500), () {
gridScrollController
.jumpTo(gridScrollController.position.maxScrollExtent);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.symmetric(
horizontal: 12.0,
),
child: Expanded(
child: GridView.builder(
controller: gridScrollController,
itemCount: images.length,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 10.0),
itemBuilder: (BuildContext context, int index) {
return Image.network(images[index]);
},
),
),
),
);
}
}
或者你也可以试试这个
Widget build(BuildContext context) {
if (gridScrollController.hasClients) {
setState(() {
gridScrollController
.jumpTo(gridScrollController.position.maxScrollExtent);
});
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.symmetric(
horizontal: 12.0,
),
child: Expanded(
child: GridView.builder(
controller: gridScrollController,
itemCount: images.length,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 10.0),
itemBuilder: (BuildContext context, int index) {
return Image.network(images[index]);
},
),
),
),
);
}
推荐阅读
- r - 将指数分布拟合到任务持续时间计数
- javascript - 如何扩展/替换特定的图表类方法?
- ios - 创建一个提醒列表,它可以在您从我的应用创建的提醒应用中保存您的提醒
- php - 显示具有不同 SQL 语句建议的多个 PHP 表
- c - 如何将字符串作为参数传递给 C 宏
- html - 记录 iPad 屏幕按下:位置和时间
- ms-access - 根据输入到另一个查找字段的结果,尝试将 6 个不同的表连接到一个查找字段
- node.js - 如何修复“TypeError:Router.use() 需要一个中间件函数但有一个对象”
- python - Unboud 本地错误 - 为什么?范围混淆
- javascript - TypeError:无法读取未定义的属性“toDate”