フラッタ拡張リストアイテム

この記事については、我々はどのように我々はフラッタの拡張可能なリストの項目を作ることができる見ているでしょう.
我々は、リストでこれを使用しますが、また、それは自分のアイテムとしてこれを使用することができます.
拡張可能なリストは以下の例のようになります.

あなたが沿って続くことを望むならば、私は出発点として私のFlutter hello world appをしています.

データセットの定義

私たちの例では、引用符の著者を最初に参照し、クリックすると、実際の選択を示すために展開されます.
この例では、静的なクォートリストを使用します.この記事のクラスに変換することにフォーカスしません.
次のリストを参考にします.

final List quotes = [
    {
      "quote":
          "It’s your place in the world; it’s your life. Go on and do all you can with it, and make it the life you want to live.",
      "author": "Mae Jemison"
    },
    {
      "quote":
          "You may be disappointed if you fail, but you are doomed if you don’t try.",
      "author": "Beverly Sills"
    },
    {
      "quote":
          "Remember no one can make you feel inferior without your consent.",
      "author": "Eleanor Roosevelt"
    },
    {
      "quote": "Life is what we make it, always has been, always will be.",
      "author": "Grandma Moses"
    },
    {
      "quote":
          "The question isn’t who is going to let me; it’s who is going to stop me.",
      "author": "Ayn Rand"
    },
    {
      "quote":
          "When everything seems to be going against you, remember that the airplane takes off against the wind, not with it.",
      "author": "Henry Ford"
    },
    {
      "quote":
          "It’s not the years in your life that count. It’s the life in your years.",
      "author": "Abraham Lincoln"
    },
    {
      "quote": "Change your thoughts and you change your world.",
      "author": "Norman Vincent Peale"
    },
    {
      "quote":
          "Either write something worth reading or do something worth writing.",
      "author": "Benjamin Franklin"
    },
    {
      "quote": "Nothing is impossible, the word itself says, “I’m possible!”",
      "author": "–Audrey Hepburn"
    },
    {
      "quote": "The only way to do great work is to love what you do.",
      "author": "Steve Jobs"
    },
    {
      "quote": "If you can dream it, you can achieve it.",
      "author": "Zig Ziglar"
    }
];

フラッタの項目のリストをレンダリングする

今、我々はフラッタのこれらのアイテムのリストをレンダリングしたい.
ListView Builderを使用してこれを行うことができます.

@override
Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.all(8),
      itemCount: quotes.length,
      itemBuilder: (BuildContext context, int index) {
        // Render our item
      },
      separatorBuilder: (BuildContext context, int index) => const Divider(),
    );
}

アイテムのビルダーを変更し、カスタムウィジェットを返します.

itemBuilder: (BuildContext context, int index) {
    return _buildExpandableTile(quotes[index]);
},

フラッタ拡張タイル

拡張可能なタイルアイテムには、タイトル属性があり、展開するリストタイルアイテムを持つことができます.
この例では以下のようにします.

Widget _buildExpandableTile(item) {
    return ExpansionTile(
      title: Text(
        item['author'],
      ),
      children: <Widget>[
        ListTile(
          title: Text(
            item['quote'],
            style: TextStyle(fontWeight: FontWeight.w700),
          ),
        )
      ],
    );
}

これは我々が必要とするロジックを気にかけて、我々がクリックすることができる要素を広げて、彼らの内容を示すためにクリックします.
そしてそれは、拡張可能なリスト項目リストを作成するフラッターの超簡単な方法です.
私はいくつかの他のフレームワークは、これらのアクションを追跡し、自分自身の状態を維持するようにフラッターでどのように簡単ですかに驚いています.
GitHubで完全なコードを見ることができます.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook