私が見たいFlutter日記
注1:https://api.flutter.dev/flutter/widgets/PageView-class.html

PageView

今日勉強するのはPageViewです
複数ページのスクロール可能領域が表示されます.左右または上下に押すと次のページが表示されます.普段アプリを使うときは、複数の写真を1つのフレーム内で左右に押して見ればいいと思います.
例を見ればわかる.コードに入りましょう

コードの例で説明しましょう。

公式ページに提供されているコードを持ってきて少し修正してから閲覧します.

PageViewデフォルトジェネレータ

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Text PageView';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const PageViewWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class PageViewWidget extends StatelessWidget {
  const PageViewWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final PageController controller =
    PageController(initialPage: 0, viewportFraction: 0.8);
    
    return PageView(
      scrollDirection: Axis.horizontal,
      controller: controller,
      children: <Widget>[
        Container(
          color: Colors.blue.withOpacity(0.5),
          child: Center(
            child: Text('첫 번째 페이지',style: TextStyle(fontSize: 50),),
          ),
        ),
        Container(
          color: Colors.orangeAccent.withOpacity(0.5),
          child: Center(
            child: Text('두 번째 페이지',style: TextStyle(fontSize: 50),),
          ),
        ),
        Container(
          color: Colors.cyanAccent.withOpacity(0.5),
          child: Center(
            child: Text('세 번째 페이지',style: TextStyle(fontSize: 50),),
          ),
        ),
      ],
    );
  }
}

2番日記に書いてあるListViewに似ています.ビルダージェネレータがあるのも同じです.
違うのは、PageViewがコントローラを使っていること!△しかし、必ずしも使う必要はありません.

final PageController controller =
    PageController(initialPage: 0, viewportFraction: 0.8);

InitialPageは、アプリケーションを初めて構築する際に、まず何ページ目を表示するかを決定します.0の場合、最初のサブエレメントが表示されます.
viewportFractionは、サブ要素として配置されたページに表示される領域の数を決定します.このプロパティのため、背景色を表示するためにコードを少し修正しました.運転画面を見てみましょう.
viewportFraction : 0.8viewportFraction : 1
ジェネレータを見てみましょう.

PageView.builder

ListView.ビルダーとの方法はあまり違いません.サブエレメントを1つずつリストするのではなく、itemBuilderを使用してページを作成します.コードを見てみましょう.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Text PageView';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const PageViewWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class PageViewWidget extends StatefulWidget {
  const PageViewWidget({Key? key}) : super(key: key);

  @override
  _PageViewWidgetState createState() => _PageViewWidgetState();
}

class _PageViewWidgetState extends State<PageViewWidget> {
  int currentPage = 0;
  List<String> pageName = ["First Page", "Second Page", "Third Page"];

  final PageController controller =
  PageController(initialPage: 0, viewportFraction: 0.8);

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: controller,
      onPageChanged: (value) {
        setState(() {
          currentPage = value;
        });
      },
      itemCount: pageName.length,
      itemBuilder: (context, index) {
        return Container(
          color: Colors.blue.withOpacity(index * 0.1),
          child: Center(
            child: Text(
              pageName[index],
              style: TextStyle(fontSize: 50),
            ),
          ),
        );
      },
    );
  }
}

上記の実行コードと似てみましょう.運転画面は以下の通りです.
コントローラ使用コントローラ未使用
今回はcontrollerを削除し、initialPageは自動的に0に設定し、viewportFractionは1に設定しても関係ありません.PageViewのデフォルトジェネレータもそうです.なくてもいい!では、使いたくないです.うん.
今日の日記はここまで!