文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >ListTile tileColor溢流ListView

问ListTile tileColor溢流ListView
EN

Stack Overflow用户
提问于 2021-12-10 17:31:57
回答 3查看 95关注 0票数 -1

我有一个ListView和ListTiles，它设置了tileColor属性。ListTile中的所有文本和图标都是剪裁的，而tileColor在ListView之外是可见的。我如何剪辑整个ListTile，使ListView之外的任何东西都是可见的？我尝试过将ListView包装在不同的容器中，而ListTile包装在容器中却没有任何结果。

代码语言：javascript
复制
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const MyHomePage(title: 'Reminders'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List _reminders = <String>[];

  void _addReminder(String text) {
    setState(() {
      _reminders.add(text);
    });
  }

  Widget _buildRow(String text, int i) {
    return ListTile(
      title: Text('[enter image description here][1]Reminder'),
      trailing: IconButton(
          onPressed: () {
            setState(() {
              _reminders.removeAt(i);
            });
          },
          icon: Icon(Icons.delete)),
      subtitle: Text(text),
      tileColor: Colors.lightBlue,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
    );
  }

  void _showMenu() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 400,
            child: ListView.builder(
              padding: EdgeInsets.all(8),
              itemBuilder: (context, i) => _buildRow(_reminders[i], i),
              itemCount: _reminders.length,
            ),
          ),
          Container(
            height: 100,
            width: double.infinity,
            child: Text('hello'),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addReminder('hello there');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

​

​

flutter
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-12-16 18:43:11

要解决你的问题，把瓷砖包在材料里。这是一个经过测试的解决方案。说明在代码下面。

简短的版本：

代码语言：javascript
复制
  Widget _buildRow(String text, int i) {
    return Material(
        child: ListTile(
          title: Text('[enter image description here][$i]Reminder'),
          trailing: IconButton(
            onPressed: () {
              setState(() {
                _reminders.removeAt(i);
              });
            },
            icon: const Icon(Icons.delete)),
        subtitle: Text(text),
        tileColor: Colors.lightBlue,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
    ));
  }

完整的工作示例：

代码语言：javascript
复制

进口‘包装:颤振/材料。飞镖’；

(){

runApp(const MyApp())；

}

类MyApp扩展StatelessWidget {

代码语言：javascript
复制
const MyApp({Key? key}) : super(key: key);
代码语言：javascript
复制
@override
代码语言：javascript
复制
Widget build(BuildContext context) {
代码语言：javascript
复制
  return MaterialApp(
代码语言：javascript
复制
    title: 'Flutter Demo',
代码语言：javascript
复制
    theme: ThemeData(
代码语言：javascript
复制
      primarySwatch: Colors.teal,
代码语言：javascript
复制
    ),
代码语言：javascript
复制
    home: const MyHomePage(title: 'Reminders'),
代码语言：javascript
复制
  );
代码语言：javascript
复制
}

}

类MyHomePage扩展StatefulWidget {

代码语言：javascript
复制
const MyHomePage({Key? key, required this.title}) : super(key: key);
代码语言：javascript
复制
final String title;
代码语言：javascript
复制
@override
代码语言：javascript
复制
State<MyHomePage> createState() => _MyHomePageState();

}

类_MyHomePageState扩展状态{

代码语言：javascript
复制
final List _reminders = <String>[];
代码语言：javascript
复制
void _addReminder(String text) {
代码语言：javascript
复制
  setState(() {
代码语言：javascript
复制
    _reminders.add(text);
代码语言：javascript
复制
  });
代码语言：javascript
复制
}
代码语言：javascript
复制
Widget _buildRow(String text, int i) {
代码语言：javascript
复制
  return Material(child: ListTile(
代码语言：javascript
复制
    title: Text('[enter image description here][$i]Reminder'),
代码语言：javascript
复制
    trailing: IconButton(
代码语言：javascript
复制
        onPressed: () {
代码语言：javascript
复制
          setState(() {
代码语言：javascript
复制
            _reminders.removeAt(i);
代码语言：javascript
复制
          });
代码语言：javascript
复制
        },
代码语言：javascript
复制
        icon: const Icon(Icons.delete)),
代码语言：javascript
复制
    subtitle: Text(text),
代码语言：javascript
复制
    tileColor: Colors.lightBlue,
代码语言：javascript
复制
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
代码语言：javascript
复制
  ));
代码语言：javascript
复制
}
代码语言：javascript
复制
void _showMenu() {}
代码语言：javascript
复制
@override
代码语言：javascript
复制
Widget build(BuildContext context) {
代码语言：javascript
复制
  return Scaffold(
代码语言：javascript
复制
    appBar: AppBar(
代码语言：javascript
复制
      title: Text(widget.title),
代码语言：javascript
复制
      actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
代码语言：javascript
复制
    ),
代码语言：javascript
复制
    body: Column(
代码语言：javascript
复制
      children: <Widget>[
代码语言：javascript
复制
        Container(
代码语言：javascript
复制
          height: 400,
代码语言：javascript
复制
          child: ClipRect(
代码语言：javascript
复制
            child: ListView.builder(
代码语言：javascript
复制
              shrinkWrap: true,
代码语言：javascript
复制
              padding: const EdgeInsets.all(8),
代码语言：javascript
复制
              itemBuilder: (context, i) =>              _buildRow(_reminders[i], i),
代码语言：javascript
复制
              itemCount: _reminders.length,
代码语言：javascript
复制
            ),
代码语言：javascript
复制
          )
代码语言：javascript
复制
        ),
代码语言：javascript
复制
        Container(
代码语言：javascript
复制
          color: Colors.white,
代码语言：javascript
复制
          width: double.infinity,
代码语言：javascript
复制
          child: Text('hello'),
代码语言：javascript
复制
        )
代码语言：javascript
复制
      ],
代码语言：javascript
复制
    ),
代码语言：javascript
复制
    floatingActionButton: FloatingActionButton(
代码语言：javascript
复制
      onPressed: () {
代码语言：javascript
复制
        _addReminder('hello there');
代码语言：javascript
复制
      },
代码语言：javascript
复制
      child: const Icon(Icons.add),
代码语言：javascript
复制
    ),
代码语言：javascript
复制
  );
代码语言：javascript
复制
}

}

代码语言：javascript
复制

​

​

这可能被认为是一个bug，但它是预期的行为。瓷砖的颜色是由ListTile的第一个材料小部件祖先绘制的(我相信这使它能够优化昂贵的裁剪)。有关更多信息，请参见ListTile文档。

票数 2
EN

Stack Overflow用户

发布于 2021-12-10 17:58:52

代码语言：javascript
复制
// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

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 MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const MyHomePage(title: 'Reminders'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // ignore: prefer_final_fields
  List _reminders = <String>[];

  void _addReminder(String text) {
    setState(() {
      _reminders.add(text);
    });
  }

  Widget _buildRow(String text, int i) {
    return ListTile(
      title: const Text('Reminder'),
      trailing: IconButton(
          onPressed: () {
            setState(() {
              _reminders.removeAt(i);
            });
          },
          icon: const Icon(Icons.delete)),
      subtitle: Text(text),
      tileColor: Colors.lightBlue,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
    );
  }

  void _showMenu() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
      ),
      body: ListView.separated(
              padding: const EdgeInsets.all(8),
              itemBuilder: (context, i) => _buildRow(_reminders[i], i),
              itemCount: _reminders.length, separatorBuilder: (BuildContext context, int index) {
              return const SizedBox(height:10);},
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addReminder('hello there');
        },
        child: const Icon(Icons.add),
      ),
    );
  }

}

​

​

票数 0
EN

Stack Overflow用户

发布于 2021-12-16 13:33:05

这是我的解决方案代码

代码语言：javascript
复制
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const MyHomePage(title: 'Reminders'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List _reminders = <String>[];

  void _addReminder(String text) {
    setState(() {
      _reminders.add(text);
    });
  }

  Widget _buildRow(String text, int i) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 5),
      child: ListTile(
        title: Text('[enter image description here][1]Reminder'),
        trailing: IconButton(
            onPressed: () {
              setState(() {
                _reminders.removeAt(i);
              });
            },
            icon: Icon(Icons.delete)),
        subtitle: Text(text),
        tileColor: Colors.lightBlue,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
    );
  }

  void _showMenu() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))
        ],
      ),
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              padding: EdgeInsets.all(8),
              itemBuilder: (context, i) => _buildRow(_reminders[i], i),
              itemCount: _reminders.length,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.white,
              width: double.infinity,
              child: Text('hello'),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addReminder('hello there');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

这是ss

​

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70308347

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档