ListTile的背景在Flutter中溢出?

wa7juj8i  于 2023-08-07  发布在  Flutter
关注(0)|答案(2)|浏览(166)

使用此代码,ListTile的背景将从容器中取出。我把它涂成红色。我哪里做错了?

body: SingleChildScrollView(
          child: Padding(
              padding: const EdgeInsets.all(10),
              child: Container(
                  height: 400,
                  color: Colors.grey,
                  padding: const EdgeInsets.all(2),
                  child: ListView.builder(
                    itemCount: contentList.length,
                    prototypeItem: const ListTile(
                      style: ListTileStyle.list,
                      title: Text("jhgjhgj"),
                    ),
                    itemBuilder: (context, index) {
                      return ListTile(
                        tileColor: Colors.red,
                        contentPadding: EdgeInsets.zero,
                        title: Text(contentList[index]),
                      );
                    },
                  ))))

字符串


的数据

lvjbypge

lvjbypge1#

  • 有一个悬而未决的问题,当ListTile使用容器小部件 Package 时,ListTile颜色超出了父视图/指定的约束,背景颜色如here所述。*

现在要解决问题(作为解决办法),您可以使用Material小部件将ListTile Package 为:

return Material(
                    child: ListTile(
                      tileColor: Colors.red,
                      contentPadding: EdgeInsets.zero,
                      title: Text(contentList[index]),
                    ),
                  );

字符串
在线演示:https://zapp.run/edit/flutter-z31s06na31t0?entry=lib/main.dart&file=lib/main.dart
完整答案:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Container(
              height: 400,
              color: Colors.grey,
              padding: const EdgeInsets.all(2),
              child: ListView.builder(
                itemCount: contentList.length,
                prototypeItem: const ListTile(
                  style: ListTileStyle.list,
                  title: Text("jhgjhgj"),
                ),
                itemBuilder: (context, index) {
                  return Material(
                    child: ListTile(
                      tileColor: Colors.red,
                      contentPadding: EdgeInsets.zero,
                      title: Text(contentList[index]),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

gt0wga4j

gt0wga4j2#

由于您正在使用ListView.builder提供滚动SingleChildScrollView功能,在这种情况下可能不需要。这里是更新的代码

body: Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 400,
color: Colors.grey,
padding: const EdgeInsets.all(2),
child: ListView.builder(
  itemCount: contentList.length,
  itemBuilder: (context, index) {
    return ListTile(
      tileColor: Colors.red,
      contentPadding: EdgeInsets.zero,
      title: Text(contentList[index]),
    );
  },
),))

字符串

相关问题