颤振列表视图波纹效果不起作用

Posted 2023-02-23

【中文标题】颤振列表视图波纹效果不起作用

【英文标题】：Flutter List View Ripple Effect Doesn't Work

【发布时间】：2022-01-23 10:29:20

【问题描述】：

我在 AlertDialog 容器中有一个 ListView。有一个 InkWell 方法，但涟漪效应不起作用，我不能放置分隔符。如何放置分隔符并产生连锁反应？

Widget setupAlertDialoadContainer(context) 
return Container(
  color: Colors.white,
  height: 300.0,
  width: 300.0,
  child: ListView.builder(
      itemCount: showroomModel.length,
      itemBuilder: (BuildContext context, int index) 
        return InkWell(
          onTap: () => 
            print(showroomModel[index]),
          ,
          child: ListTile(
            title: Text(showroomModel[index]),
          ),
        );
      ),
);

【参考方案1】：

用于分离器和波纹效果

    ListView.separated(
         itemCount: 25,
         separatorBuilder: (BuildContext context, int index) => Divider(height: 1),
         itemBuilder: (BuildContext context, int index) 
           return  Inkwell(child: 
ListTile(
             title: Text('item $index'),
           ));
         ,
    );

【讨论】：

分离器部分正在工作，但仍然没有涟漪效应。

我添加这个：return Material (child: InkWell( //code here ));它工作。

【参考方案2】：

对于InkWell 涟漪效应，请尝试将InkWell 包装在Material 小部件中。

Material(
  child: InkWell(
    onTap: () 
      print(showroomModel[index]);
    ,
    child: ListTile(
      title: Text(showroomModel[index]),
    ),
  ),
)

对于分隔符，请使用 ListView.separated，如 Tasnuva oshin 的回答。

【参考方案3】：

看看这个：

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return const MaterialApp(
      home: HomePage(),
    );
  


class HomePage extends StatefulWidget 
  const HomePage(Key? key) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();


class _HomePageState extends State<HomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: const Text('List app'),
          
        ),
        body: Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: () 
                showDialog(
                    context: context,
                    builder: (BuildContext context) 
                      return AlertDialog(
                        title: Text("Image Required"),
                        content: Container(
                          height: 200,
                          width: 200,
                          child: ListView.separated(
                            itemBuilder: (context, index) 
                              return Ink(
                                color: Colors.white,
                                child: ListTile(
                                  leading: Text("Sample"),
                                  title: Text("title"),
                                  onTap: () ,
                                ),
                              );
                            ,
                            separatorBuilder: (context, index) 
                              return Divider();
                            ,
                            itemCount: 4,
                          ),
                        ),
                        actions: <Widget>[
                          FlatButton(
                            child: Text("Close"),
                            onPressed: () 
                              Navigator.of(context).pop();
                            ,
                          )
                        ],
                      );
                    );
              ,
              child: Text('Press'),
            ),
          ),
        ));