我希望當我單擊 按鈕時，它會顯示在 listVeiw 中它是水平方向的下 3 個容器。這是我的代碼。當我第一次點擊它時它可以作業，但它不適用于其他水龍頭
import 'package:flutter/material.dart';
class FindCars extends StatefulWidget {
const FindCars({Key? key}) : super(key: key);
@override
State<NewWayToFindCars> createState() => _NewWayToFindCarsState();
}
class _NewWayToFindCarsState extends State<NewWayToFindCars> {
var pricesListNumber = 10;
int counter = 1;
List months = [
'?????',
'??????',
'????',
'?????',
'????',
'?????',
'?????',
'?????',
'??????',
'??????',
'??????',
'??????'
];
var currentMonth = new DateTime.now().month;
var currentDay = new DateTime.now().day;
late ScrollController _scrollController;
@override
void initState() {
_scrollController = ScrollController();
super.initState();
}
@override
Widget build(BuildContext context) {
print(months[currentMonth - 1]);
print(currentDay);
print(DateTime.now());
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Directionality(
textDirection: TextDirection.rtl,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'${months[currentMonth - 1]} 2022',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'cairo',
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
_scrollController.animateTo(-200,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Container(
child: Icon(Icons.remove, size: 22),
width: 50,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFDCEDC8).withOpacity(0.5),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
),
),
),
InkWell(
onTap: () {
_scrollController.animateTo(200,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Container(
child: Center(child: Icon(Icons.add_sharp, size: 22)),
width: 50,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFDCEDC8).withOpacity(0.25),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
),
),
],
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
child: ListView(
controller: _scrollController, // scroll contoller
scrollDirection: Axis.horizontal,
children: new List.generate(
pricesListNumber,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Center(child: Text('${currentDay }')),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
color: Color(0xFFDCEDC8).withOpacity(0.5),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.circular(10),
),
height: 50,
width: MediaQuery.of(context).size.width * 0.25,
),
),
),
),
),
],
),
),
);
}
}
這是我的 UI 代碼，現在它只在第一次點擊時有效，直到最后才有效。你能幫我嗎？
uj5u.com熱心網友回復：
只需使用一個滾動控制器，將其附加到您的 ListView 構建器，然后在您的 Button 的 onPress/onTap 方法上，呼叫 _scrollController.animateTo(someOffset)
復制下面的代碼并運行到您的專案中。我已根據您的需求對其進行了定制。
import 'package:flutter/material.dart';
class TestView extends StatefulWidget {
const TestView({Key? key}) : super(key: key);
@override
State<TestView> createState() => _TestViewState();
}
class _TestViewState extends State<TestView> {
late ScrollController _scrollController;
@override
void initState() {
_scrollController = ScrollController();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: () {
_scrollController.animateTo(-500,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: const Text("-")),
ElevatedButton(
onPressed: () {
_scrollController.animateTo(500,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: const Text(" "),
),
],
),
SizedBox(
height: 200,
child: ListView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
children: List.generate(20, (index) {
return Container(
color: Colors.amber,
height: 100,
width: 100,
margin: const EdgeInsets.only(right: 10),
child: Center(child: Text("$index")),
);
}),
),
)
],
),
);
}
}
uj5u.com熱心網友回復：
將 ScrollController 附加到您的可滾動小部件，然后使用 scrollController.animateTo(//offset) 到達您想要的位置。請檢查此頁面上的 animateTo 方法。
編輯：示例代碼：
ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter'),
centerTitle: true,
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
scrollController.animateTo(0,
duration: Duration(seconds: 1), curve: Curves.easeIn);
},
child: Text("go top")),
Expanded(
flex: 1,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
itemBuilder: (context, index) {
return Text('This is it.');
},
),
),
],
),
);
}
在您的 IDE 中嘗試一下。
編輯：
這是您的代碼中的問題，您需要通過從 scrollController.position 中減去/添加 200 來減少/增加滾動控制器的當前偏移量。您第一次移動它是因為當時偏移量不在 200 處，而第二次在 200 處移動它。這就是它沒有移動的原因，這顯然沒有錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442666.html
上一篇：如何將這兩個按鈕放在左側？