如何在卡 flutter 中制作列表視圖

Question

我是一名新的 flutter 開發人員。我嘗試制作 listview 以查看來自數據庫的一組數據。該列表現在有效，但如下：

現在它沒有單獨呈現。我需要顯示卡片中的每個元素。我正在嘗試做的一個例子：

在這張圖片中，卡片上的每個項目都是分開的，並且與第二個分開。我該怎么做？如果有人知道解決方案，請幫助我。

我的代碼現在是這樣的：

@override
    Widget build(BuildContext context) {

    return Scaffold(
        body: Column(
            children: <Widget>[
              Expanded(
                   child: Card(
                       child :FutureBuilder<List<Flowerdata>>(
                          future: fetchFlowers(),
                        builder: (context, snapshot) {
                          if (!snapshot.hasData) return Center(
                          child: CircularProgressIndicator()
                          );

                      return ListView(

                        children: snapshot.data
                            .map((data) => Column(children: <Widget>[

                          GestureDetector(
                            onTap: ()=>{
                              getItemAndNavigate(data.id, context)
                            },
                            child: Row(
                                children: [
                                  Container(
                                      width: 100,
                                      height: 100,
                                      margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                      child: ClipRRect(
                                          borderRadius: BorderRadius.circular(8.0),
                                          child:
                                          Image.network(data.flowerImageURL,
                                            width: 200, height: 100, fit: BoxFit.cover,))),

                                  Flexible(child:
                                  Text(data.flowerName,
                                      style: TextStyle(fontSize: 18))
                                  ),

                                ]),),

                          Divider(color: Colors.black),

                        ],
                        ))
                            .toList(),

                      );

                    },

                  )
              ),

              ),
          ]
      )
    );
  }

Answer 1

您需要用Card包裝您的項目的Column （而不是FutureBuilder ）

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: <Widget>[
      Expanded(
        child: FutureBuilder<List<Flowerdata>>(
          future: fetchFlowers(),
          builder: (context, snapshot) {
        if (!snapshot.hasData)
          return Center(child: CircularProgressIndicator());

        return ListView(
          children: snapshot.data
              .map((data) => Card(
                child: Column(
                      children: <Widget>[
                        GestureDetector(
                          onTap: () => {getItemAndNavigate(data.id, context)},
                          child: Row(children: [
                            Container(
                                width: 100,
                                height: 100,
                                margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                child: ClipRRect(
                                    borderRadius: BorderRadius.circular(8.0),
                                    child: Image.network(
                                      data.flowerImageURL,
                                      width: 200,
                                      height: 100,
                                      fit: BoxFit.cover,
                                    ))),
                            Flexible(
                                child: Text(data.flowerName,
                                    style: TextStyle(fontSize: 18))),
                          ]),
                        ),
                        Divider(color: Colors.black),
                      ],
                    ),
              ))
              .toList(),
        );
          },
        ),
      ),
    ]));
  }

Answer 2

設置

啟動一個新的 Flutter 項目。 我打電話給我的flutter_listview。

打開 main.dart 並將代碼替換為以下內容：

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ListViews',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('ListViews')),
        body: BodyLayout(),
      ),
    );
  }
}

class BodyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _myListView(context);
  }
}

// replace this function with the code in the examples
Widget _myListView(BuildContext context) {
  return ListView();
}

注意最后的 _myListView() function。 您將用以下示例中的代碼替換它

ListViews的基本類型

Static 列表查看

如果您有一個不變的項目的簡短列表，那么您可以使用默認的 ListView 構造函數來制作它。 這對於制作設置菜單頁面之類的東西很有用。

將 _myListView() 替換為以下內容：

 Widget _myListView(BuildContext context) {
  return ListView(
    children: <Widget>[
      ListTile(
        title: Text('Sun'),
      ),
      ListTile(
        title: Text('Moon'),
      ),
      ListTile(
        title: Text('Star'),
      ),
    ],
  );
}

運行應用程序，您應該會看到下圖。 （在刷新之后，通常熱重載工作正常，但我發現有時我需要進行熱重啟，甚至完全停止並重新啟動應用程序。）

ListTile 自定義

Flutter 團隊設計了 ListTile 小部件來處理您想要的列表中的正常內容。 這意味着大多數時候不需要定義自定義布局。 您可以只為列表中的每個項目使用默認的 ListTile。 當我們在上面的例子中創建一個 ListView 時，我們只使用了 title 選項。 但我們也可以顯示字幕、圖像和圖標。

將 _myListView() 替換為以下內容

 Widget _myListView(BuildContext context) {
  return ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.wb_sunny),
        title: Text('Sun'),
      ),
      ListTile(
        leading: Icon(Icons.brightness_3),
        title: Text('Moon'),
      ),
      ListTile(
        leading: Icon(Icons.star),
        title: Text('Star'),
      ),
    ],
  );
}

前導用於在 ListTile 的開頭添加圖標或圖像。

如果您指定了尾隨屬性，您還可以在末尾添加一個圖標。

ListTile(
  leading: Icon(Icons.wb_sunny),
  title: Text('Sun'),
  trailing: Icon(Icons.keyboard_arrow_right),
)

右箭頭圖標使列表項看起來是可點擊的，但實際上並非如此。 還沒有。 我們將在下一節中看到如何添加觸摸事件。 這很簡單。 （提示：onTap）

除了圖標，我們還可以使用圖像。 推薦的圖像選項是使用 CircleAvatar 小部件。

將 _myListView() 替換為以下內容：

   Widget _myListView(BuildContext context) {
  return ListView(
    children: <Widget>[
      ListTile(
        leading: CircleAvatar(
          backgroundImage: AssetImage('assets/sun.jpg'),
        ),
        title: Text('Sun'),
      ),
      ListTile(
        leading: CircleAvatar(
          backgroundImage: AssetImage('assets/moon.jpg'),
        ),
        title: Text('Moon'),
      ),
      ListTile(
        leading: CircleAvatar(
          backgroundImage: AssetImage('assets/stars.jpg'),
        ),
        title: Text('Star'),
      ),
    ],
  );
}

如果您想掌握 FLUTTER 列表視圖，請在此處輸入鏈接描述