我正在尝试克隆 youtube 的评论部分。 但是,当我滚动底部工作表注释时(只有当我捕获底部工作表的顶部并拉动它时,该注释才应该展开),它就会扩展。我希望我能够充分解释。
DraggableScrollableSheet(
initialChildSize: 0.55,
maxChildSize: 1,
snap: true,
snapSizes: const [
0.55,
1,
],
builder: (context, scrollController) => Container(
color: Color(0xff181818),
child: ListView(
controller: scrollController,
children: [
customAppBar(context),
Row(
children: [
const SizedBox(
width: 15,
),
filter("All", Colors.white, Colors.black),
const SizedBox(
width: 15,
),
filter("News", Colors.grey.withOpacity(0.2), Colors.white),
],
),
const SizedBox(
height: 20,
),
ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
SizedBox(
height: 45,
width: double.infinity,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
radius: 26,
backgroundColor: Colors.pink,
child: Text(
"R",
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: TextFormField(
decoration: InputDecoration.collapsed(
hintText: "Add a comment...",
hintStyle: TextStyle(
color: Colors.white.withOpacity(0.6),
fontSize: 20)),
))
],
),
),
),
Divider(
color: Colors.white.withOpacity(0.5),
thickness: 1,
height: 30,
),
comment(),
comment(),
comment(),
comment(),
comment(),
comment(),
],
),
],
),
),
);
buildBottomSheet(context) => showModalBottomSheet(
isDismissible: false,
backgroundColor: Colors.transparent,
context: context,
isScrollControlled: true,
barrierColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
builder: (context) => Sheet(),
);
我该怎么做才能使评论在自身内滚动并且底部工作表只能在从底部工作表顶部拉出时才能展开?
最佳答案
当我使用脚手架创建底部工作表、创建应用程序栏和 ListView 、为应用程序栏提供可拖动滚动表滚动 Controller 并向 ListView 提供单独的滚动 Controller 时,问题得到解决。
DraggableScrollableSheet(
initialChildSize: 0.55,
maxChildSize: 1,
snap: true,
expand: false,
snapSizes: const [
0.55,
1,
],
builder: (context, scrollController) => Scaffold(
backgroundColor: Colors.black,
appBar: PreferredSize(
child: customAppBar(context, scrollController),
preferredSize: Size.fromHeight(100)),
body: Container(
color: Color(0xff181818),
child: ListView(
shrinkWrap: true,
children: [
Row(
children: [
const SizedBox(
width: 15,
),
filter("All", Colors.white, Colors.black),
const SizedBox(
width: 15,
),
filter("News", Colors.grey.withOpacity(0.2), Colors.white),
],
),
const SizedBox(
height: 20,
),
SizedBox(
height: 45,
width: double.infinity,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
radius: 26,
backgroundColor: Colors.pink,
child: Text(
"R",
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: TextFormField(
decoration: InputDecoration.collapsed(
hintText: "Add a comment...",
hintStyle: TextStyle(
color: Colors.white.withOpacity(0.6),
fontSize: 20)),
))
],
),
),
),
Divider(
color: Colors.white.withOpacity(0.5),
thickness: 1,
height: 30,
),
ListView.builder(
shrinkWrap: true,
controller: myScrollController,
itemCount: 10,
itemBuilder: ((context, index) => comment())),
],
),
),
),
);
} }
关于flutter - DraggableScrollableSheet滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73262159/