facebook twitter hatena line email

「Flutter/画像/grid表示」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==サンプル== 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...」)
 
 
(同じ利用者による、間の2版が非表示)
行1: 行1:
 
==サンプル==
 
==サンプル==
 +
画像がGridで3列表示される。
 +
 
img.dart
 
img.dart
 +
<pre>
 
class Img
 
class Img
 
{
 
{
 
   String url = "";
 
   String url = "";
 
}
 
}
 +
</pre>
  
 
grid_page.dart
 
grid_page.dart
行43: 行47:
 
         body: gridView
 
         body: gridView
 
     );
 
     );
 +
  }
 
</pre>
 
</pre>
 
参考:https://flutter.ctrnost.com/basic/layout/gridview/
 
参考:https://flutter.ctrnost.com/basic/layout/gridview/

2020年1月16日 (木) 19:00時点における最新版

サンプル

画像がGridで3列表示される。

img.dart

class Img
{
  String url = "";
}

grid_page.dart

  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
    );
  }

参考:https://flutter.ctrnost.com/basic/layout/gridview/