[Fluth]ListViewの作成
46319 ワード
1.文書の表示
リストにリストされているデータは確定しており、いくつかなければ以下のようにすることができます.
しかし、多くのデータがあれば
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())
結果
リストの横列(水平)
scrollDirection: Axis.横型でいいです
結果
親要素の高さ値が指定されていないため、bodyのすべての高さ値が使用されます.高さ値をあげたい場合は、Containerで囲み、高さ値をあげます.
境界線をくれたら
ListView.ビルダーではなくListView分ける
結果
イメージも入れてみようかな~
並びの数が多くなってきて、並びを統合して管理しやすいようです…!こんな時…!
このように回転して並べられています.
カラーを適用する部分はちょっと難しいです.
まずこのようにすればいいです.
管理を容易にするため、別途配列を外しました.
newList.dartファイルを作成し、名前を変更しました.
作業中のmaindartファイルにインポートしたら、変数に挿入して適用します.
画面が直接出てきました~成功😆
些細なことにcss属性に触れた.慣れるには、もっと練習しなければならない.利潤ダウンジャケット-値、height:autoのような前に勝手に書いたものは、ここではだめです.すべてグーグル化します.😭😭 今はまだ構造が分からずcssも混乱していますが、いつか以前vueでやっていたように気持ちがいいのではないでしょうか…?
今日作ったリストは...結果...
やるべきことは多くない...ははは….
リストにリストされているデータは確定しており、いくつかなければ以下のようにすることができます.
<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];
宣言の後ろにセミコロンがあることを忘れないでください.
リストで使用する主な方法とプログラムは次のとおりです.
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>

やるべきことは多くない...ははは….
Reference
この問題について([Fluth]ListViewの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@qkrtnfks128/Flutter-ListView-생성하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol