Flutter에서 ListView 끝까지 프로그래밍 방식으로 스크롤하는 방법은 무엇입니까?

ListView는 Flutter에서 선형으로 구성된 스크롤 가능한 위젯 모음입니다. 또한 가장 많이 사용되는 것은 스크롤 위젯입니다. 따라서 이 글에서는 Flutter의 ListView 위젯이 무엇인지 살펴보겠습니다.

Flutter의 ListView 위젯은 Flutter 개발자 요구 사항에 따라 내부에 요소를 올바른 순서로 배치하여 필요한 작업을 수행합니다.

ListViews 위젯은 다음 네 가지 유형으로 제공됩니다.

ListView()
ListView.builder()
ListView.separated()
ListView.custom()

자세한 내용은 listview 위젯 및 해당 유형에 대해 자세히 알아보세요. 코드에서 때때로 목록 보기를 위쪽 또는 아래쪽(프로그래밍 방식)으로 스크롤해야 합니다. 따라서 이 글에서는 Flutter에서 ListView의 맨 아래까지 스크롤하는 방법을 알아봅니다.

ListView를 관리하려면 ScrollController 이 필요합니다.

ScrollController _scrollController = ScrollController(); 목록 보기를 위에서 아래로 이동하려면 아래 스니펫을 사용할 수 있습니다.

onPressed: () async {
           SchedulerBinding.instance?.addPostFrameCallback((_) {
                 _scrollController.animateTo(
                 _scrollController.position.maxScrollExtent,
                 duration: const Duration(milliseconds: 1),
                 curve: Curves.fastOutSlowIn);
                 });
          },

목록 보기를 아래에서 위로 이동하려면 아래 스니펫을 사용할 수 있습니다.

onPressed: () async {
           SchedulerBinding.instance?.addPostFrameCallback((_) {
                 _scrollController.animateTo(
                 _scrollController.position.minScrollExtent,
                 duration: const Duration(milliseconds: 1),
                 curve: Curves.fastOutSlowIn);
                 });
          },

양쪽 스크롤 목록 보기의 전체 예를 살펴보겠습니다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Coflutter'),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  child: const Text('To Top'),
                  onPressed: () async {
             SchedulerBinding.instance?.addPostFrameCallback((_) {
                      _scrollController.animateTo(
                          _scrollController.position.minScrollExtent,
                          duration: const Duration(milliseconds: 1),
                          curve: Curves.fastOutSlowIn);
                    });
                  },
                ),
                ElevatedButton(
                  child: const Text('To Bottom'),
                  onPressed: () async {
                 SchedulerBinding.instance?.addPostFrameCallback((_) {
                      _scrollController.animateTo(
                          _scrollController.position.maxScrollExtent,
                          duration: const Duration(milliseconds: 1),
                          curve: Curves.fastOutSlowIn);
                    });
                  },
                ),
              ],
            ),
            Expanded(
              child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: ListTile(
                      title: Text("Index : $index"),
                    ),
                  );
                },
              ),
            ),
            const Divider(),
          ],
        ));
  }
}

산출:

결론:

이 기사에서는 여러 웹사이트와 블로그에서 보았을 수도 있는 흥미로운 ListView 기능을 배웠습니다. 우리는 중소기업 및 대기업을 위한 맞춤형 애플리케이션 솔루션으로 알려진 선도적인 Flutter 비즈니스 앱 개발 회사입니다. 생산적이고 운영적인 앱 솔루션에 대해서는 개발자에게 문의하십시오. 이제 동일한 기능을 앱에 추가할 수 있습니다. 이 기사가 마음에 드시기 바랍니다.