Flutter コンポーネントの基礎 ——ListView#
ListView はスクロール可能なリストで、iOS の ScrollView に似ており、横方向および縦方向にスクロールでき、内容に制限はありません。
ListView の使用#
ListView の使用は非常に簡単ですが、練習が必要です；
ListView の使用は、children を設定することで実現され、children 内の Item は Widget オブジェクトです。
縦方向のスクロール#
コードは以下の通りです：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView学習',
home: Scaffold(
appBar: new AppBar(
title: new Text('ListView Widget')
),
body: new ListView(
children: <Widget>[
Container(
height: 50,
color: Colors.orangeAccent,
child: const Center(
child: Text('エントリー A'),
),
),
Container(
height: 50,
color: Colors.lightGreenAccent,
child: const Center(
child: Text('エントリー B'),
),
),
new ListTile(
leading: new Icon(Icons.access_time),
title: new Text('access_time'),
),
new Image.network(
'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg')
],
)
)
);
}
}
効果は以下の通りです：
横方向のスクロール#
ListViewのscrollDirectionはスクロール方向を制御します
コードは以下の通りです
class MyList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(scrollDirection: Axis.horizontal, children: [
new Container(
width: 180.0,
color: Colors.lightBlue,
),
new Container(
width: 180.0,
color: Colors.lightGreen,
),
new Container(
width: 180.0,
color: Colors.orange,
),
new Container(
width: 180.0,
color: Colors.orangeAccent,
)
]);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'テキストウィジェット',
home: Scaffold(
body: Center(
child: Container(
height: 200.0,
child: MyList(),
),
),
));
}
}
効果は以下の通りです：
書き方の違いに注意してください。ここではカスタムのMyListウィジェットを定義し、MyApp内でMyListを使用することで、親ビューに過剰にネストする問題を回避しています。
動的リスト ListView.builder ()#
動的リストを使用するには、まず List 型を見てみましょう。
List 型
List はコレクション型で、いくつかの方法で宣言できます。使用方法は Swift の Array を参考にできます。
var myList = List(): 非固定長の配列var myList = List(2): 長さ 2 の配列var myList = List<String>(): String 型の配列を作成var myList = [1, 2, 3]: 1、2、3 の配列を作成
また、generateメソッドを使用して List 要素を生成することもできます。例えば、
new List<String>.generate(1000,, (i) => "アイテム $i");
動的リスト
コードは以下の通りです：
class MyList extends StatelessWidget {
final List<String> entries = <String>['A', 'B', 'C'];
final List colors = [
Colors.orangeAccent,
Colors.lightBlueAccent,
Colors.cyanAccent
];
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: colors[index],
child: Center(
child: Text('エントリー ${entries[index]}'),
),
);
},
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'リストビルド学習',
home: Scaffold(
appBar: new AppBar(
title: new Text('リストビルド学習'),
),
body: Center(
child: Container(
child: MyList(),
),
),
));
}
}
効果は以下の通りです：
