如何使SingleChildScrollView从底部开始？
如何使SingleChildScrollView从底部开始？
提问于 2019-05-20 04:27:17
我正在开发一个应用程序，遇到了一个SingleChildScrollView从顶部开始的问题：
我如何让它从底部开始，就像这样：
滚动视图是在topContent中实现的，这是屏幕的上半部分：
final topContent = Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10.0),
height: MediaQuery.of(context).size.height * 0.5,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/drones1.jpg"),
fit: BoxFit.cover,
),
)),
Container(
height: MediaQuery.of(context).size.height * 0.5,
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, .9)),
child: SingleChildScrollView( //scroll view implemented here
child: Center(
child: topContentText,
),
),
),
Positioned(
left: 8.0,
top: 60.0,
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back, color: Colors.white),
),
)
],
);SchedulerBinding.instance.addPostFrameCallback UPDATE:我分配了一个控制器，并按照这个 link's 示例尝试并使用调用滚动控制器的jumpTo函数，但是它给出了一个异常，其结果与以前相同：。
import 'package:garuda_academy_app/Constants.dart';
import 'Lesson.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
class DetailPage extends StatefulWidget {
final Lesson lesson;
DetailPage({Key key, this.lesson}) : super(key: key);
@override
_DetailPageState createState() => _DetailPageState(lesson: lesson);
}
class _DetailPageState extends State<DetailPage> {
final Lesson lesson;
ScrollController _scrollController;
_DetailPageState({this.lesson});
@override // I use the SchedularBinding here
void initState() {
super.initState();
SchedulerBinding.instance.addPostFrameCallback((_) =>
_scrollController.jumpTo(_scrollController.position.maxScrollExtent));
}
@override
Widget build(BuildContext context) {
final levelIndicator = Container(
child: Container(
child: LinearProgressIndicator(
backgroundColor: Color.fromRGBO(209, 224, 224, 0.2),
value: lesson.indicatorValue,
valueColor: AlwaysStoppedAnimation(Colors.green)),
),
);
final course = Container(
padding: const EdgeInsets.all(7.0),
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(5.0)),
child: new Text(
lesson.course,
style: TextStyle(color: Colors.white),
),
);
final topContentText = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 120.0),
Icon(
Icons.flight,
color: Colors.white,
size: 40.0,
),
Container(
width: 90.0,
child: new Divider(color: Colors.green),
),
SizedBox(height: 10.0),
Text(
lesson.title,
style: TextStyle(color: Colors.white, fontSize: 45.0),
),
SizedBox(height: 30.0),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(flex: 1, child: levelIndicator),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text(
lesson.level,
style: TextStyle(color: Colors.white),
))),
Expanded(flex: 1, child: course)
],
),
],
);
final topContent = Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10.0),
height: MediaQuery.of(context).size.height * 0.5,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(lesson.imagePath),
fit: BoxFit.cover,
),
)),
Container(
height: MediaQuery.of(context).size.height * 0.5,
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, .9)),
child: SingleChildScrollView(
controller: _scrollController, // Where I pin the ScrollController
child: Center(
child: topContentText,
),
),
),
Positioned(
left: 8.0,
top: 60.0,
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back, color: Colors.white),
),
)
],
);
final bottomContentText = Text(
lesson.content,
style: TextStyle(fontSize: 18.0),
);
final downloadButton = Container(
padding: EdgeInsets.symmetric(vertical: 16.0),
width: MediaQuery.of(context).size.width,
child: RaisedButton(
onPressed: () => {},
color: Color.fromRGBO(58, 66, 86, 1.0),
child:
Text(DETAIL_PAGE_DOWNLOAD, style: TextStyle(color: Colors.white)),
));
final bottomContent = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(40.0),
child: Center(
child: Column(
children: <Widget>[bottomContentText, downloadButton],
),
),
);
return Scaffold(
body: Column(
children: <Widget>[topContent, bottomContent],
),
);
}
}异常:I/颤振( 1567)：另一个异常被抛出: NoSuchMethodError:在null上调用getter的“位置”。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-20 11:38:28
我通过在定义ScrollController时(从更新中)进一步添加以下内容来解决这个问题：
ScrollController _scrollController = new ScrollController(
initialScrollOffset: 0.0,
keepScrollOffset: true,
);Stack Overflow用户
发布于 2021-09-08 09:57:23
只需在SingleChildScrollView中添加反向真即可
SingleChildScrollView( reverse: true, child: Column(), )
Stack Overflow用户
发布于 2022-08-26 15:15:21
这就是我的工作方式，我不得不在启动跳转呼叫之前添加一点小延迟，没有小延迟就无法工作。
void initState() {
super.initState();
SchedulerBinding.instance?.addPostFrameCallback((_) async {
await Future.delayed(Duration(milliseconds: 500));
_scrollController.jumpTo(_scrollController.position.maxScrollExtent));
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56214315
复制相关文章
相似问题
腾讯云开发者
