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

问题描述

我是 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 个。 尝试删除额外的参数。

解决方法

试试这个:

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

代替:

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

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

,

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

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

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