[Fluth]ListViewの作成

1.文書の表示
リストにリストされているデータは確定しており、いくつかなければ以下のようにすることができます.

<script>
import 'dart:html';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}
class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {

   return MaterialApp(
       home:Scaffold(
         appBar: AppBar(
             title:Text('ListView Study')
         ),
         body:ListView(
           padding:const EdgeInsets.all(8),
           children: [
             Container(
               height: 50,
               color: Colors.amber[600],
               child:const Center(
                 child:Text('11111')
               )
             ),
             Container(
                 height: 50,
                 color: Colors.amber[500],
                 child:const Center(
                     child:Text('22222')
                 )
             ),
             Container(
                 height: 50,
                 color: Colors.amber[400],
                 child:const Center(
                     child:Text('33333')
                 )
             )

           ],
         ),
         bottomNavigationBar: BottomAppBar(
           child:Container(
             height: 50,
             color:Colors.black,
             child: Row(
                 mainAxisAlignment:MainAxisAlignment.spaceEvenly,

               children: [
                 Icon(Icons.chevron_left,color:Colors.white),
                 Icon(Icons.circle_rounded,color:Colors.white),
                 Icon(Icons.account_circle,color:Colors.white),

               ],
             ),
           )
         ),
       )
   );
 }
}
</script>

結果

しかし、多くのデータがあれば
ListView.ビルダーを使えばいいです
Dart List?
リストは、複数のデータを格納できる資料構造です.リスト内のデータの順序性のため、配列の代わりにデータに順次アクセスできます.
基本形態は以下の通りである.
List<データ型>変数名=[データ1、データ2、データ3、...];
または
List<データ型>変数名=List()
変数名.add(データ1);
変数名.add(データ2);
変数名.add(データ3);
リスト内のデータ型がint、String、bulなどの単一のタイプではなく、複数のタイプである場合、dynamicまたはvarを使用できます.
List 1=[1]、「ナイトナンバーなし」,true];
varlist2=[2,“moyahoo”,false];
宣言の後ろにセミコロンがあることを忘れないでください.
リストで使用する主な方法とプログラムは次のとおりです.

indexOf(要素):要素のインデックス値

add(データ):追加データ

addAll([データ1,データ2]):複数のデータを追加

remove(要素):要素

を削除

removeAt(インデックス):指定したインデックスの要素

を削除します.

contains(要素):要素が含まれている場合はtrue、false

clear():リスト要素

を完全に削除

sort():リスト要素ソート

first:リストの最初の要素

last:リストの最後の要素

逆転:リスト要素逆シーケンス

isNotEmpty:リストが空でない場合はtrueまたはfalse

isEmpty:リストが空の場合はtrue、false

single:リストに要素が1つしかない場合は、その要素

を返します.
Set?
リストとほぼ同様の形式である.なお、初期値を入力する場合、Listは[]を使用し、Setは{}を使用する.
また,重複は許されないため,同じ値を複数回加えても1つしか存在しない.
順序がないため、インデックスで各要素にアクセスできませんが、for...inゲートを通って近づくことができます.
Setのメソッドやプログラムにはリストと重なる部分が多いが,インデックスに関するコンテンツは使用しない.(indexOf(), removeAt(), sort(), reversed())

<script>
import 'dart:html';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<String> entries = <String>['a','b','c','d'];
    final List<int> colorCodes = <int>[600,500,100,200];
    return MaterialApp(
        home:Scaffold(
          appBar: AppBar(
              title:Text('ListView Study')
          ),
          body:ListView.builder(
            padding:const EdgeInsets.all(8),
            itemCount:entries.length,
            itemBuilder: (BuildContext context, int index){
              return Container(
                height: 50,
                color: Colors.amber[colorCodes[index]],
                child:Center(
                  child:Text('순서대로 ${entries[index]}')
                )
              );
            }

          ),
          bottomNavigationBar: BottomAppBar(
            child:Container(
              height: 50,
              color:Colors.black,
              child: Row(
                  mainAxisAlignment:MainAxisAlignment.spaceEvenly,

                children: [
                  Icon(Icons.chevron_left,color:Colors.white),
                  Icon(Icons.circle_rounded,color:Colors.white),
                  Icon(Icons.account_circle,color:Colors.white),

                ],
              ),
            )
          ),
        )
    );
  }
}
</script>

結果

リストの横列(水平)
scrollDirection: Axis.横型でいいです

結果
親要素の高さ値が指定されていないため、bodyのすべての高さ値が使用されます.高さ値をあげたい場合は、Containerで囲み、高さ値をあげます.

境界線をくれたら
ListView.ビルダーではなくListView分ける

結果

イメージも入れてみようかな~


並びの数が多くなってきて、並びを統合して管理しやすいようです…!こんな時…!

<script>
 const newList = [
      //map타입.key value pair방식(한쌍.짝)
      {
        "name": "Burger",
        "brand": "버거킹",
        "color": "D4A85B",
        "image": "burger.png",
        "price": "2000",
      },
      {
        "name": "Cheese Dip",
        "brand": "노브랜드",
        "color": "F5DD9A",
        "image": "cheese_dip.png",
        "price": "2000",
      },
      {
        "name": "Cola",
        "brand": "맥날",
        "color": "EBB171",
        "image": "cola.png",
        "price": "2000",
      },
      {
        "name": "Fries",
        "brand": "맘스터치",
        "color": "D4885B",
        "image": "fries.png",
        "price": "2000",
      },
      {
        "name": "Fries",
        "brand": "파파터치",
        "color": "D4882B",
        "image": "fries.png",
        "price": "4000",
      },
      {
        "name": "Fries",
        "brand": "파파터치",
        "color": "D4882B",
        "image": "fries.png",
        "price": "4000",
      }
    ];  
</script>

このように回転して並べられています.
カラーを適用する部分はちょっと難しいです.

まずこのようにすればいいです.
管理を容易にするため、別途配列を外しました.

newList.dartファイルを作成し、名前を変更しました.


作業中のmaindartファイルにインポートしたら、変数に挿入して適用します.
画面が直接出てきました~成功😆
些細なことにcss属性に触れた.慣れるには、もっと練習しなければならない.利潤ダウンジャケット-値、height:autoのような前に勝手に書いたものは、ここではだめです.すべてグーグル化します.😭😭 今はまだ構造が分からずcssも混乱していますが、いつか以前vueでやっていたように気持ちがいいのではないでしょうか…?
今日作ったリストは...結果...

<script>
  import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'newList.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {

  const newList=NEW_LIST;

  return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.grey,
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(Icons.menu),
                  SizedBox(
                    width: 80,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children:[
                        Icon(Icons.abc_sharp),
                        Icon(Icons.star)
                      ]

                    ),
                  )
                ],
              )
          ),
          body: Container(
            child: ListView.builder(
            padding: EdgeInsets.all(8),
            itemCount: newList.length,
            itemBuilder: (BuildContext context, int index) {

              return Container(
                height: 100,
                margin: EdgeInsets.only(left: 10, right: 10),
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                        color: Colors.white24,
                        blurRadius: 10.0,
                        spreadRadius: 1.0,
                        offset: Offset(-3, -3))
                  ],
                  color: Color(int.parse("0xff${newList[index]['color']}")),
                  borderRadius: BorderRadius.vertical(top: Radius.circular(10)),
                ),
                // color:Color(0xffF5DD9A),

                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                              '${newList[index]['name']}',
                              style:TextStyle(fontWeight: FontWeight.bold,fontSize: 24)
                          ),
                          Text(
                              '${newList[index]['brand']}',
                              style: TextStyle(fontSize: 18,color: Colors.grey),
                          ),
                          Text('\$ ${newList[index]['price']}'),
                        ],
                      ),
                      Image.asset(
                          '../assets/images/${newList[index]['image']}'),
                    ]));
        },
      ),
          ),
         bottomNavigationBar: BottomAppBar(
          child: Container(
          height: 50,
          color: Colors.black,
          child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.chevron_left, color: Colors.white),
            Icon(Icons.circle_rounded, color: Colors.white),
            Icon(Icons.account_circle, color: Colors.white),
          ],
        ),
      )),
    ),
  ));
}
}

</script>

やるべきことは多くない...ははは….