Flutter/画像/grid表示 - 変更履歴

2020年1月16日 (木) 10:00にAdminによる

2020-01-16T10:00:09Z

2020年1月16日 (木) 09:56にAdminによる

2020-01-16T09:56:36Z

2020年1月16日 (木) 09:56にAdminによる

2020-01-16T09:56:16Z

Admin: ページの作成:「==サンプル== img.dart class Img { String url = ""; } grid_page.dart

   List imgs = new List();   Img img = new Img();   img.url = "http://example.co...」

2020-01-16T09:55:05Z

ページの作成:「==サンプル== img.dart class Img { String url = ""; } grid_page.dart <pre> List<Img> imgs = new List<Img>(); Img img = new Img(); img.url = "http://example.co...」

新規ページ

==サンプル==
img.dart
class Img
{
String url = "";
}

grid_page.dart
<pre>
List<Img> imgs = new List<Img>();
Img img = new Img();
img.url = "http://example.com/hoge.png";
imgs.add(img);
imgs.add(img);
imgs.add(img);
imgs.add(img);
@override
Widget build(BuildContext context) {
GridView gridView = GridView.builder(
itemCount: imgs.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: (BuildContext context, int index) {
return Image.network(imgs[index].url,
// height: 100.0,
// width: 70.0,
fit: BoxFit.cover);
}
);
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue.withOpacity(0.3),
elevation: 0.0,
title: Text("画像一覧",
style: TextStyle(
fontSize: 16,
locale: Locale("ja", "JP")
)
),
),
extendBodyBehindAppBar: true,
body: gridView
);
</pre>
参考：https://flutter.ctrnost.com/basic/layout/gridview/

@@ 行1: / 行1: @@
 ==サンプル==
 画像がGridで3列表示される。
 img.dart
 <pre>

@@ 行1: / 行1: @@
 ==サンプル==
 img.dart
 class Img
+{
    String url = "";
+}
 grid_page.dart
@@ 行43: / 行45: @@
          body: gridView
      );
 </pre>
 参考：https://flutter.ctrnost.com/basic/layout/gridview/