【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part86 Scrolling
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part86 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part85 Scrolling
引き続き、Scrollingについて学びます。
Scrolling
GridViewウィジェット
プロパティ
padding
paddingプロパティはGridViewウィジェットのパディングです。
図をお借りしてきました。
mainAxisSpacing
mainAxisSpacingプロパティは、要素同士のスペースです。
scrollDirectionの値によって意味が変わります。
- Axis.vertical・・・横方向のスペース
- Axis.horizontal・・・縦方法のスペース
crossAxisSpacing
crossAxisSpacingプロパティは交差する要素同士のスペースです。
- Axis.vertical・・・縦方向のスペース
- Axis.horizontal・・・横方法のスペース
crossAxisCount
crossAxiscountプロパティは並べる数です。
本書の例の通り、Axis.verticalでcrossAxisCount = 3の場合、横3列(1行に3つの要素が並ぶ)となります。
childaspectRatio
childAspectRatioプロパティはグリッド要素の縦横の比を指定できるようです。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _State();
}
}
class _State extends State<MyApp> {
List<String> images = [
"images/cat_nekoko.png",
"images/flutter_275x86.jpg",
"images/button.png",
"images/flutter.jpg",
"images/cat_nekoko.png",
"images/flutter_275x86.jpg",
"images/button.png",
"images/flutter.jpg",
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 3,
),
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return Image.asset(
images[index],
fit: BoxFit.cover,
);
},
childCount: 8,
),
padding: EdgeInsets.all(10),
shrinkWrap: true,
)),
);
}
Container box(String text) {
return Container(
alignment: Alignment.center,
width: 100,
height: 100,
color: Colors.green,
child: Text(text),
);
}
}
いい感じになりました！
最後に
これでGridViewの学習は終わりのようです。
GridView.builderが優秀そうですね。
今日はここまで！