facebook twitter hatena line google mixi email

「Flutter/UI/ListView/基本」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(Admin がページ「Flutter/Ui/ListView/基本」を「Flutter/UI/ListView/基本」に、リダイレクトを残さずに移動しました)
 
(同じ利用者による、間の1版が非表示)
行1: 行1:
 +
==リストサンプル==
 
枠線なし
 
枠線なし
 
<pre>
 
<pre>
行92: 行93:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
==無限リスト==
 +
itemCountを削除し、データ部分をText(index.toString())にすると無限に表示される。
 +
 +
==指定のリスト番号に戻る==
 +
PageStorageKey(0)などを追加する。カッコ内はおそらくユニーク番号
 +
<pre>
 +
    return ListView.builder(
 +
      key: PageStorageKey(1),
 +
      itemCount: listdatas.length,
 +
      itemBuilder: (context, int index) {
 +
</pre>
 +
https://qiita.com/umechanhika/items/a2aca1ead61045803a02

2019年12月4日 (水) 11:21時点における最新版

リストサンプル

枠線なし

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const data = [
      "taro", "jiro", "saburo",
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, int index) {
          return Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                data[index],
              ));
        },
      ),
    );
  }

https://nzigen.com/flutter-reference/2018-04-17-list-view.html

枠線あり

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const data = [
      "taro", "jiro", "saburo",
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, int index) {
          return Card(
            child: Padding(
              child: Text(data[index],),
              padding: EdgeInsets.all(20.0),),
          );
        },
      ),
    );
  }
}

枠線あり、クリック可能

class _MyHomePageState extends State<MyHomePage> {
  void _click() {
      print("click");
  }
  @override
  Widget build(BuildContext context) {
    const data = [
      "taro", "jiro", "saburo",
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, int index) {
          return InkWell(
            child: Card(
              child: Padding(
                child: Text(data[index],),
                padding: EdgeInsets.all(20.0),),
            ),
            onTap:
              _click,
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:() {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

無限リスト

itemCountを削除し、データ部分をText(index.toString())にすると無限に表示される。

指定のリスト番号に戻る

PageStorageKey(0)などを追加する。カッコ内はおそらくユニーク番号

    return ListView.builder(
      key: PageStorageKey(1),
      itemCount: listdatas.length,
      itemBuilder: (context, int index) {

https://qiita.com/umechanhika/items/a2aca1ead61045803a02