flutter - 如何在不使 draggablescrollablesheet 不可滚动的情况下下推列表视图?
问题描述
我遇到了将列表视图从可拖动滚动表(工作表)的视图中向下推的问题,同时仍然能够滚动工作表。所以用更简单的话来说,我不希望蓝色容器在工作表位于底部时出现。我试图编辑 listview 容器的高度,这使它离开屏幕,因此无法滚动。我还尝试将工作表包装在一个单子滚动视图中,但没有成功。我试图不惜一切代价避免使用按钮!
import 'package:flutter/material.dart';
import 'package:photosgroup2/chat/message_model.dart';
import 'package:photosgroup2/chat/user_model.dart';
class FeedTest extends StatefulWidget {
FeedTest({Key key}) : super(key: key);
@override
_FeedTest createState() => _FeedTest();
}
class _FeedTest extends State<FeedTest> {
_buildMessage(
Message message,
User user,
) {
//Reply reply){
String time= message.time;
return Container(
// color: Colors.yellow,
child: Padding(
padding: EdgeInsets.only(left: 0), //5
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 5 ,top: 3.5), //10
child: new CircleAvatar(
radius: (17.5),
backgroundImage: AssetImage(
user.profilePic,
),
),
),
SizedBox(
width: 5,
),
Container(
//width: MediaQuery.of(context).size.width,
// width: 300,
child: Material(
color:Color(0x00000000) , //TRANSPARENT
//color: const Color(0xf2ffffff),
///Color(0xe6ffffff) // ! REVISIT Change color of boxes???
/*borderRadius: BorderRadius.only(
topRight: Radius.circular(16.0),
bottomRight: Radius.circular(16.0),
bottomLeft: Radius.circular(16.0),
),*/
child: Padding(
padding: EdgeInsets.only(
left: 10.0), //Revisit
child: Column(
//mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min,
//crossAxis
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 5,
),
Text(
user.name,
style: TextStyle(
fontFamily: 'Lato-Bold',
fontSize: 13 ,
color: const Color(0xd9343f4b),
),
textAlign: TextAlign.left,
),
SizedBox(width: 8),
Padding(
padding: const EdgeInsets.only(left:8.0),
child: Text(
'$time hours ago',
style: TextStyle(
fontFamily: 'Lato',
fontSize: 12 ,
color: const Color(0xff5a6978),
),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 5,
),
//SizedBox(height: 10,),//if(message.imageUrl!='') {
//hasReplies(message, user, reply)
//},
//}
],
),
),
),
),
],
),
SizedBox(height:5),
Container(
//color:Colors.blue,
//: EdgeInsets.only(right:10
//right: 10 * SizeConfig.widthRatio,
//),
child: Container(
//color: Colors.green,
margin: EdgeInsets.only(left:5,right:15),
child: Text(
message.text,
style: TextStyle(
fontFamily: 'Lato',
fontSize: 13 ,
color: const Color(0xff5a6978),
height: 1.5384615384615385
),
textAlign: TextAlign.left,
),
),
),
SizedBox(//color:Colors.amber,
height:15),
Transform.translate(
offset: Offset(-6,0),
child: Container(
width: 350.0,
height: 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1.0),
color: const Color(0x40343f4b),
),
),
),
SizedBox(//color:Colors.amber,
height:5),
],
),
),
);
}
@override
Widget build(BuildContext context) {
// visibility of reply button in top right corner
return Scaffold(
backgroundColor: const Color(0xfffafafa),
body: SafeArea(
bottom: false,
top: false,
child: //Column(
//mainAxisAlignment: MainAxisAlignment.spaceAround,
//children: <Widget>[
Stack(
children: <Widget>[
DraggableScrollableSheet(
initialChildSize: 0.068,
minChildSize: 0.068,
maxChildSize: 0.71,
builder: (context, scrollController) {
return Container(
//padding: EdgeInsets.symmetric(horizontal: 20),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
child: Container(
width: 375, //screen width
height: 812 * 0.71, //screen height *
color: Color(0xffdfdfdf),
),
),
),
Stack(
children: [
Padding(
padding: const EdgeInsets.only(left: 10, top: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(27.5),
topRight: Radius.circular(27.5),
),
child: Container(
//margin: EdgeInsets.only(),
width:340,
//height: 515,
color: Colors.yellow,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(27.5),
topRight: Radius.circular(27.5),),
child: Container(
// padding: EdgeInsets.only(top:40),
color: Colors.blue,
child: ListView.builder(
//reverse: true,
controller: scrollController,
itemCount: comments.length,
itemBuilder: (BuildContext context, int index) {
final User messenger = comments[index].sender;
final Message message = comments[index];
//final Reply reply = replies[index];
return Column(children: <Widget>[
_buildMessage(
message,
messenger,
), //reply),
SizedBox(
height: 8,
) // !COME BACK TO SPACE BETWEEN
]);
},
),
),
),
),),
),
],
),
Stack(
children: <Widget>[
//67
Padding(
padding: EdgeInsets.only(left: 141, top: 6),
child: SizedBox(
width: 93.0,
height: 29.0,
child: Stack(
children: <Widget>[
SizedBox(
width: 93.0,
height: 29.0,
child: Stack(
children: <Widget>[
// Adobe XD layer: 'Rectangle' (shape)
Container(
width: 93,
height: 29.0,
child: Padding(
padding: EdgeInsets.only(
left: 1, top: 6),
child: Text(
'Place Holder',
style: TextStyle(
fontFamily: 'Lato',
fontSize: 12,
color: const Color(0xffffffff),
),
textAlign: TextAlign.center,
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(27.5),
color: const Color(0xf2343f4b),
),
),
],
),
),
],
),
),
),
],
),
],
),
);
},
),
],
),
// ],
//),
),
);
}
}
解决方案
推荐阅读
- swift - 如何在 Swift 中获取 MacOS 上打开的窗口列表?
- google-cloud-platform - GCP上的设计服务
- optimization - 如何在 Pytorch 中优化较低的 Cholesky 参数?
- jquery - HTML多选标签如何通过点击事件选择多个选项
- reactjs - 更改所选元素 onMouseEnter- React
- c++ - 'localtime_s': 不是 VS2015 中'std' 的成员
- laravel - 试图在 Facebook twitter LinkedIn 上分享帖子无法使用 Laravel 发布或分享的第三方帐户
- javascript - 如何将 Javascript 作为字符串传递给 HTML 函数
- groovy - Groovy == 不符合规范
- asp.net-mvc - 如何首先在实体框架代码中添加 HttpPostedFileBase 类型的属性