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

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

Flutter의 ListView 위젯은 개발자의 요구 사항에 따라 내부 요소를 올바른 순서로 배치하여 필요한 작업을 수행합니다. 또한 다음 프로젝트를 위해 Flutter 앱 개발자를 고용할 수 있는 전문가의 가용성을 확인하세요.

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

1. 리스트뷰()
2. 리스트뷰.빌더()
3. ListView.separated()
4. 리스트뷰.커스텀()

여기에서 자세한 내용과 함께 listview 위젯 및 해당 유형에 대해 자세히 알아볼 수 있습니다.

코드에서 때때로 목록 보기를 위쪽 또는 아래쪽(프로그래밍 방식)으로 스크롤해야 합니다. 따라서 이 글에서는 Flutter에서 ListView의 맨 아래까지 스크롤하는 방법을 알아봅니다.

또한 중요한 주제인 Flutter에서 16진수 색상 문자열을 사용하는 방법을 확인하십시오.

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 {
  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 기능을 배웠습니다. 이제 동일한 기능을 앱에 추가할 수 있습니다. 이 기사가 마음에 드시기 바랍니다.