如何在卡 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 列表视图，请在此处输入链接描述