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

您需要使用Column将项目的FutureBuilder（而不是Card）包装起来

@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（）函数。您将用以下示例中的代码替换它

ListView的基本类型

静态ListView

如果您有简短的未更改项目列表，则可以使用默认的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'),
      ),
    ],
  );
}

如果要掌握颤振器列表视图enter link description here

如何在卡片飘动中制作列表视图

2 个答案: