FlutterをベースにしたListViewの基本的な使い方

序章

Flutterは史上最強のUIフレームワークとして豊富なUIコンポーネントを備えていますが、本記事ではDouyinプロジェクトの実戦に向けて最もよく使われる基本コンポーネントであるListViewの使い方を簡単に紹介します。

コンストラクタ

ListView({
  super.key, 
  super.scrollDirection,//滑动方向
  super.reverse,//列表反向
  super.controller, //控制器
  super.primary,
  super.physics, //系数
  super.shrinkWrap,//item总长度相关
  super.padding,//内边距
  this.itemExtent,
  this.prototypeItem,
  bool addAutomaticKeepAlives = true,//自动保存页面状态
  ..................
  List<Widget> children = const <Widget>[], //item集合
  int? semanticChildCount,
  
})

共通属性の紹介

共通の属性を以下の表に示します。

属性	タイプ	概要
スクロール方向	軸	Axis.horizontal: 水平リスト、Axis.vertical: 垂直リスト
パディング	エッジインセットジオメトリ	パディング
逆行	ブール	コンポーネントを逆順に並べる
子供	リスト	リスト要素
収縮包装	ブール	アイテムの高さに基づいて総高さを決定するかどうか

基本的な使い方

ListView.builder

ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    RouteBean bean = RouteData.getElements()[index];
      return itemWidget(bean); //每个item的布局
        },
  itemCount: RouteData.getElements().length
)
//自定义Item布局
Widget itemWidget(bean){
    return Padding(padding: const EdgeInsets.only(
        top:10,left: 20,right: 20),child: Container(
        constraints: const BoxConstraints(maxWidth: double.infinity,maxHeight: 60),
        child: TextButton(
          style:ButtonStyle(backgroundColor: MaterialStatePropertyAll(Theme.of(context).primaryColor)) ,
          child: Text(
            bean.name,
            style: const TextStyle(fontSize: 20,color: Colors.white),
          ),
          onPressed: ()=>Navigator.pushNamed(context, bean.route,arguments:bean.name),
        )
    ),);

ListView.builder は、項目数が不明な場合や、ネットワークから取得したデータの一覧を表示する場合によく使用されます。案件レイアウトをカスタマイズして一覧を表示します。

効果は次のとおりです。

ListView.分離

ListView.builder と比較すると、ListView. Separated には separatorBuilder 属性があり、リスト内の各項目にカスタム分割線を直接追加できます。コードの量が多いため、ここではコードの一部のみを示します。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
       RouteBean bean = RouteData.getElements()[index];
       return itemWidget(bean)
       },
  separatorBuilder: (context, index) { //自定义分割线
       return const Divider(
         thickness: 10, // 高度  10
         color: Color(0xFFF80D05),
       );
     },

効果は次のとおりです。

3.ListView(children: [],) . これは、項目の数が固定されており、後で増加しない状況に適しています。このシナリオはほとんど使用されません。

固定ヘッドを追加する

Android では、リストにヘッダーを追加したい場合、実装が簡単ではないことは誰もが知っています。特に初期の ListView はヘッダーの追加をまったくサポートしておらず、後の公式 RecyclewView までサポートされていませんでした。しかし、FLutter の場合、ヘッダーコンポーネントの追加は非常に簡単です。

ListView.separated(
  itemBuilder: (BuildContext context, int index) {
       RouteBean bean = RouteData.getElements()[index];
       if(index == 0){
          return  Center(child: Text("我是ListView头部",style:
                      TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),);
        }else{
          return itemWidget(bean);
        };
     },
  separatorBuilder: (context, index) {
       return const Divider(
         thickness: 10,
         color: Color(0xFFF80D05),
       );
     },

効果は次のとおりです。

ListViewの項目構築箇所にif判定を追加し、添字が0の場合はヘッダコンポーネントを返し、それ以外の場合は項目のレイアウトを返すようにすれば問題なさそうに見えますが、実際には0 基本コンポーネントとして添え字が 1 つ欠落している場合、添え字が 0 の場合に列コンポーネントを追加して、この問題を解決できます。

 ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              RouteBean bean = RouteData.getElements()[index];
               if(index == 0){
                 return  Column(
                   children: [
                     Center(child: Text("我是ListView头部",style: 
                      TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),),
                     SizedBox(width: double.infinity,child: itemWidget(bean))
                   ],
                 );
              }else{
                 return itemWidget(bean);
              };
            }

Column()は縦に配置されたコンポーネントであり、内部コンポーネントは上から下に配置されます。直線的なレイアウトに似ています。Center() コンポーネントの子は中央に表示され、SizedBox() はコンポーネントのサイズを固定するために使用されます。その他の基本的なコンポーネントについてはここでは詳しく説明しませんが、学生は自分で Web ページを表示できます。

エラーを起こしやすい

開発中、ColumnでListViewを使用してページを表示する必要がある場合、ページが表示できない問題が発生します。これは、ListView を使用して Column 内の高さを直接測定することができず、この問題を解決するには ListView の外側に Expend コンポーネントを追加する必要があるためです。興味のある読者はぜひ試してみてください。

要約する

ListView は Flutter で頻繁に使用される基本コンポーネントであり、読者は共通の属性を覚えておく必要があります。ソースコード解析を通じてListViewの理解を深めるために、この記事では簡単な使い方のみを紹介します。以下のプロジェクトの実戦で使用される予定です。

将来的には、Flutter を使用してビブラートのようなプロジェクトを開発する予定です。興味のある学生はクリックしてフォローしてください!

やっと

アーキテクトになりたい場合、または 20,000 ～ 30,000 の給与範囲を突破したい場合は、コーディングとビジネスに限定されず、モデルを選択し、拡張し、プログラミング的思考を向上させることができなければなりません。また、しっかりとしたキャリアプランも大切で、学ぶ習慣も大切ですが、一番大切なのは継続力であり、継続的に実行できないプランは絵にかいたもちです。

方向性がわからない場合は、Ali のシニアアーキテクトが書いた一連の「Android の 8 つの主要モジュールに関する上級ノート」をここで共有したいと思います。これは、乱雑で散在し断片化した知識を体系的に整理するのに役立ちます。 Android開発のさまざまな知識を体系的かつ効率的に習得できます。
ここに画像の説明を挿入
私たちが普段読んでいる断片的な内容と比べて、このノートの知識ポイントはより体系的で理解しやすく、覚えやすく、知識体系に従って厳密に配置されています。