是否可以使用 Firebase 制作单独的 InkWell 按钮？扑

Question

我是 Flutter 的新手，正在尝试使用 firebase 做项目。在我的代码中，我只能用卡片编写屏幕一个 InkWell，当我尝试添加另一个 InkWell 时，项目显示错误。 那么如何添加多个 InkWell 这是我的代码；

import 'package:flutter/material.dart';
import 'package:whatsapp/home.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'YOS APP',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          brightness: Brightness.dark,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Home());
  }
}

这是我的标签页；

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';

class TabBar1 extends StatelessWidget {
  const TabBar1({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      // ignore: deprecated_member_use
      stream: Firestore.instance.collection('mat1').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        }
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: Text('Loading..'));
        }
        return Container(
          padding: EdgeInsets.all(20.0),
          child: GridView.count(
            crossAxisCount: 2,
            // ignore: deprecated_member_use
            children: snapshot.data.documents
                .map(
                  (doc) => InkWell(onTap: () {}, child MyCard(
                    title: doc['konu'],
                  ),
                )
                .toList(),
          ),
        );
      },
    );
  }
}

class MyCard extends StatelessWidget {
  final String title;
  const MyCard({
    Key key,
    this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Center(
        child: Text(title),
      ),
    );
  }
}

当我尝试将 MyCard() 小部件放入地图区域时，发生错误。

         .map(
              (doc) => MyCard(
                title: doc['konu1'],
              ),
              (doc)=> MyCard(title: doc['icerikler1'],)
            )
            .toList(),

错误； 位置参数过多：应有 1 个，但找到了 2 个。 尝试删除多余的参数。

Answer 1

试试这个：

InkWell(onTap: () {}, child: MyCard(
                    title: doc['konu'],

代替：

InkWell(onTap: () {}, child MyCard(
                    title: doc['konu'],

子项必须有一个冒号 (:)。

Answer 2

首先map 只接受一个参数，即。回调函数，它可以为列表中的每个文档返回一个小部件。如果你想从 map() 中返回多个小部件，你可以根据需要将多个小部件包装在 Column 或 Row 小部件中。

假设如果你想使用Column，你可以这样做

snapshot.data.documents
    .map(
      (doc) => Column(
        children: <Widget>[
          InkWell(
            onTap: () {},
            child: MyCard(
              title: doc['konu1'],
            ),
          ),
          InkWell(
            onTap: () {},
            child: MyCard(
              title: doc['icerikler1'],
            ),
          )
        ],
      ),
    )
    .toList();