假設我有一個可滾動頁面，在此頁面內我有另一個可滾動串列視圖（垂直），所以我希望當子串列視圖到達末尾時，可滾動頁面開始移動到它的末尾。此外，當子串列視圖到達頂部時，可滾動頁面開始移動到頂部。怎么能這樣做？
這是我的代碼
Widget FreshProductsShow(double pageHeight, double pageWidth) {
return Container(
height: pageHeight / 1.3,
width: pageWidth,
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Card(
child: Container(
width: pageWidth,
// height: pageHeight / 7,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(10)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
textDirection: TextDirection.rtl,
children: [
Image.asset(
"images/peper.png",
width: pageWidth / 4,
height: pageHeight / 8,
),
Padding(
padding: EdgeInsets.only(left: pageWidth / 6.3),
child: Column(
children: [
Padding(
padding: EdgeInsets.only(
left: pageWidth / 10, top: pageHeight / 45),
child: AutoSizeText(
"peper",
style: TextStyle(
fontSize: pageHeight / 48,
fontWeight: FontWeight.bold,
color: Color(0xff54595F)),
),
),
],
),
)
],
),
alignment: Alignment.centerRight,
),
elevation: 5,
);
},
scrollDirection: Axis.vertical,
),
);
}
uj5u.com熱心網友回復：
要找到滾動位置，您必須使用 Scroll Notification Listener NotificationListener，并且使用ScrollController我們可以控制每個 Scrollable Widget 的滾動位置。
這是您轉換為 StatefulWidget 的函式，如果我正確理解，則實作的邏輯：
class FreshProductsShow extends StatefulWidget {
const FreshProductsShow(
{Key? key, required this.pageHeight, required this.pageWidth})
: super(key: key);
final double? pageHeight;
final double? pageWidth;
@override
_FreshProductsShowState createState() => _FreshProductsShowState();
}
class _FreshProductsShowState extends State<FreshProductsShow> {
ScrollController _childScrollController = ScrollController();
ScrollController _parentScrollController = ScrollController();
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
controller: _parentScrollController,
child: Column(
children: [
Container(
color: Colors.red,
height: 300,
),
Container(
height: widget.pageHeight! / 1.3,
width: widget.pageWidth,
child: NotificationListener(
onNotification: (ScrollNotification notification) {
if (notification is ScrollUpdateNotification) {
if (notification.metrics.pixels ==
notification.metrics.maxScrollExtent) {
debugPrint('Reached the bottom');
_parentScrollController.animateTo(
_parentScrollController.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.easeIn);
} else if (notification.metrics.pixels ==
notification.metrics.minScrollExtent) {
debugPrint('Reached the top');
_parentScrollController.animateTo(
_parentScrollController.position.minScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.easeIn);
}
}
return true;
},
child: ListView.builder(
controller: _childScrollController,
itemCount: 10,
itemBuilder: (context, index) {
return Card(
child: Container(
width: widget.pageWidth,
// height: pageHeight / 7,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
textDirection: TextDirection.rtl,
children: [
Image.asset(
"images/peper.png",
width: widget.pageWidth! / 4,
height: widget.pageHeight! / 8,
),
Padding(
padding:
EdgeInsets.only(left: widget.pageWidth! / 6.3),
child: Column(
children: [
Padding(
padding: EdgeInsets.only(
left: widget.pageWidth! / 10,
top: widget.pageHeight! / 45),
child: Text(
"peper",
style: TextStyle(
fontSize: widget.pageHeight! / 48,
fontWeight: FontWeight.bold,
color: Color(0xff54595F)),
),
),
],
),
)
],
),
alignment: Alignment.centerRight,
),
elevation: 5,
);
},
scrollDirection: Axis.vertical,
),
),
),
Container(
color: Colors.red,
height: 300,
),
],
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/358926.html