Flutterから始まる

あなたがフラッターで開発を開始しても、どのように要素のリストを設定する方法を知っていないか?まあ怖い!私はどのようにフラッタの項目の簡単なリストを作成する方法を紹介してきました.無料で!
私はあなたが既にフラッタ、ダーツと宣言プログラミングに精通していると想像しますthese tutorials ファースト.
カスタムアイテムの配列でカスタムリストを作成することに集中するでしょう.なぜなら、リストを扱う最も一般的な状況かもしれません.また、足場の作成や他の出発点を見ることはありません.

1データ構造を作成する

まず最初に、データ構造とオブジェクトのリストを作成しましょう.単純な「ニュースフィード」データは、この例では十分でしょう.

class News {
  int id;
  String title, content, image_url, link;

  News(this.id, this.title, this.content, this.image_url, this.link);
}

簡単に.ユニークなID、タイトル、コンテンツ、イメージ、ウェブページへのリンク.
それから、これらのオブジェクトの簡単なリストを作成します.

List<News> lNews = List();
lNews.add(News(1, "Title1", LoremIpsumTEXT, "https://www.at-languagesolutions.com/wp-content/uploads/2016/06/http-1-1024x824.jpg", "https://www.google.com/"));
lNews.add(News(2, "Title2", "Lorem Ipsum2", "https://media.wired.com/photos/5b8999943667562d3024c321/master/w_2560%2Cc_limit/trash2-01.jpg", "https://www.google.com/"));
lNews.add(News(3, "Title3", "Lorem Ipsum3", "https://upload.wikimedia.org/wikipedia/commons/4/4b/What_Is_URL.jpg", "https://www.google.com/"));

これらの項目はAPIコールのペイロードであろう.

2 List要素のビルド

リストアイテムとしてどんなウィジェットを使うことができるかListTile 本当に我々が望むものではない、我々は新しいステートレスのウィジェットを作成し、それをlistelemと呼ぶことができる.
私たちは、右の太字と2行のコンテンツの最大のタイトルに左に画像を追加したいので、我々はStateless Widget それはそれを表します.ウィジェットがどのデータをレンダリングするかを知る必要があるので、コンストラクターのコンポーネントとしてニュース項目を追加する必要があります.

class ListElem extends StatelessWidget {
  final News news;

  const ListElem({Key key, this.news}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          //The image
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      alignment: FractionalOffset.topCenter,
                      image: NetworkImage(news.image_url))),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(right: 8.0),
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    //The title
                    Text(
                      news.title,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold
                      ),
                    ),
                    //The content
                    Text(
                      news.content,
                      maxLines: 2,
                      textAlign: TextAlign.left,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

3 .リストを本体に追加する

私たちはほとんどすべての要素を順番にして、リストを作成する必要があります.The ListView ウィジェットにはウィジェットの配列をとる“children”パラメータが付属しています.ですので、LIstElem リストビューに与えます.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: _getListElements(lNews),
      ),
    );
  }

List<Widget> _getListElements(List<News> allNews) {
    List<Widget> widgets = List();
    for (var n in allNews) {
      widgets.add(ListElem(news: n));
    }

    return widgets;
  }

ListViewを作成するもう一つの方法はbuilder これは、Androidがリストを作成する方法についてもう少し似ています.あなたはアイテムの数を知る必要があるでしょうitemBuilder すべての項目は、フレームワークによって作成されます.

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: lNews.length,
        itemBuilder: (BuildContext context, int position) {
          News item = lNews[position];
          return ListElem(news: item);
        },
      ),
    );

この最後の方法はリストを生成するためのクリーンな方法です.
それでも両方の方法で同じ結果を得ます.
3つの要素だけです.

そして、より多くの要素で:

そこにいる.リストビューの項目をカスタマイズすることができますので、ListViewはウィジェットの配列を必要とするので、簡単に複雑なレイアウトの方法を作成することができますまた、別のリスト項目をミックスします.