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

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