flutter 如何使ListView构建器中的每个ListTile都可单击?

cwdobuhd  于 2023-05-29  发布在  Flutter
关注(0)|答案(1)|浏览(288)

这是我的第一个项目Flutter。我一直在尝试使列表瓷砖可点击每个导航到不同的页面,我尝试了手势检测器,墨水井,但我不知道我在做什么。
this is the ListView
网站首页

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:plantel/screens/widgets/plant_tile.dart';
import 'package:plantel/screens/widgets/shop.dart';
import 'package:provider/provider.dart';
import 'package:plantel/screens/widgets/homelist.dart';
import 'package:google_fonts/google_fonts.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

void handleClick(String value) {
  switch (value) {
    case 'Feedback':
      break;
    case 'Dark theme':
      break;
  }
}

class _HomePageState extends State<HomePage> {
  Icon customIcon = const Icon(Icons.search);
  Widget customSearchBar = const Text('Home');
  TextEditingController textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: customSearchBar,
        foregroundColor: Colors.grey.shade200,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(25),
            bottomRight: Radius.circular(25),
          ),
        ),
        backgroundColor: const Color.fromARGB(255, 97, 122, 85),
        elevation: 0,
        actions: <Widget>[
          IconButton(
            color: Colors.grey.shade200,
            onPressed: () {
              setState(() {
                if (customIcon.icon == Icons.search) {
                  customIcon = const Icon(Icons.cancel);
                  customSearchBar = ListTile(
                    leading: Icon(
                      Icons.search,
                      color: Colors.grey.shade200,
                      size: 28,
                    ),
                    title: TextField(
                      decoration: InputDecoration(
                        hintText: 'Search Plantel',
                        hintStyle: TextStyle(
                          color: Colors.grey.shade200,
                          fontSize: 18,
                          fontStyle: FontStyle.italic,
                        ),
                        border: InputBorder.none,
                      ),
                      style: TextStyle(
                        color: Colors.grey.shade200,
                      ),
                    ),
                  );
                } else {
                  customIcon = const Icon(Icons.search);
                  customSearchBar = const Text('Home');
                }
              });
            },
            icon: customIcon,
          ),
          PopupMenuButton<String>(
            onSelected: handleClick,
            color: Colors.grey.shade200,
            itemBuilder: (BuildContext context) {
              return {'Feedback', 'Dark theme'}.map((String choice) {
                return PopupMenuItem<String>(
                  value: choice,
                  child: Text(choice),
                );
              }).toList();
            },
          ),
        ],
      ),
      backgroundColor: Colors.grey[200],
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.grey.shade200,
        color: const Color.fromARGB(255, 97, 122, 85),
        animationDuration: const Duration(milliseconds: 300),
        items: [
          Icon(
            Icons.home,
            color: Colors.grey.shade200,
          ),
          Icon(
            Icons.favorite,
            color: Colors.grey.shade200,
          ),
          Icon(
            Icons.shopping_cart,
            color: Colors.grey.shade200,
          ),
          Icon(
            Icons.person,
            color: Colors.grey.shade200,
          ),
        ],
      ),
      body: Consumer<PlantShop>(
        builder: (context, value, child) => SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(25.0),
            child: Column(
              children: [
                const SizedBox(
                  height: 25,
                ),
                Expanded(
                    child: ListView.builder(
                  itemCount: value.plantShop.length,
                  itemBuilder: (context, index) {
                    Plant eachPlant = value.plantShop[index];
                    return PlantTile(
                      plant: eachPlant,
                    );
                  },
                ))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class PlantTile extends StatelessWidget {
  PlantTile({super.key, required this.plant});

  final Plant plant;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: const Color.fromARGB(255, 218, 218, 218),
          borderRadius: BorderRadius.circular(10)),
      margin: const EdgeInsets.only(bottom: 20),
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 25),
      child: ListTile(
        title: Text(
          plant.title,
          style: GoogleFonts.anton(color: Colors.black, fontSize: 18),
        ),
        subtitle: Text(plant.description,
            style: GoogleFonts.ptSansNarrow(color: Colors.black, fontSize: 16)),
        leading: Image.asset(plant.imageSrc),
        selectedColor: plant.color,
      ),
    );
  }
}

class Plant {
  final String title;
  final String description;
  final String imageSrc;
  final Color color;

  Plant(
      {required this.title,
      required this.color,
      required this.description,
      required this.imageSrc});
}

class PlantShop extends ChangeNotifier {
  final List<Plant> _shop = [
    Plant(
      title: "Indoor plants",
      description: "An ornamental plants that is grown indoors",
      imageSrc: "assets/images/indoorplant.png",
      color: Color.fromARGB(255, 0, 0, 0),
    ),
    Plant(
      title: "Outdoor plants",
      description: "Plants that produces oxygen and absorb carbon dioxide",
      imageSrc: "assets/images/outdoorplant.png",
      color: Color.fromARGB(255, 0, 0, 0),
    ),
    Plant(
      title: "Vases",
      description: "An open container for holding plants",
      imageSrc: "assets/images/vase.png",
      color: Color.fromARGB(255, 0, 0, 0),
    ),
  ];

  // get plant list
  List<Plant> get plantShop => _shop;
}

我试着看youtube教程和在github上搜索,但没有一个对我有用。有没有可能做到这一点,或者我应该怎么做?

9ceoxa92

9ceoxa921#

ListTile构造函数上使用onTap:属性。

ListTile(
            title: Text(
              plant.title,
              style: GoogleFonts.anton(color: Colors.black, fontSize: 18),
            ),
            subtitle: Text(plant.description,
                style: GoogleFonts.ptSansNarrow(color: Colors.black, fontSize: 16)),
            leading: Image.asset(plant.imageSrc),
            selectedColor: plant.color,
            onTap: () { /* onTap logic */ },
          )

相关问题