ListView可以在背景下查看。

huangapple
go评论63阅读模式
英文:

ListView viewable under background

问题

以下是您提供的代码的中文翻译：

我遇到了一个小问题，肯定很容易解决，但我找不到任何解决方案。所有建议的主题都涉及自定义背景...
以下是我的代码：

```dart
class HomeTest extends StatefulWidget {
  const HomeTest({super.key});

  @override
  State<HomeTest> createState() => _HomeTestState();
}

class _HomeTestState extends State<HomeTest> {
  final courantController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    final soldes = FirebaseFirestore.instance.collection('Soldes');
    return Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              children: [
                const Text("文本"),
                const SizedBox(height: 20),
                const Text(
                  '另一段文本',
                  textAlign: TextAlign.center,
                ),
                Container(
                  color: Colors.white,
                  height: 50,
                ),
                const SizedBox(height: 10),
                Container(
                    color: Colors.white,
                    height: 100,
                    child: Text('容器文本')),
                const AnnoyingList(),
              ],
            ),
          ),
        ));
  }
}

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

  @override
  State<AnnoyingList> widget() => _AnnoyingListState();
}

class _AnnoyingListState extends State<AnnoyingList> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250,
      child: ListView(children: [
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), // <-- 请看这里
          ),
          title: const Text('标题1'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), // <-- 请看这里
          ),
          title: const Text('标题2'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), // <-- 请看这里
          ),
          title: const Text('标题3'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), // <-- 请看这里
          ),
          title: const Text('标题4'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), // <-- 请看这里
          ),
          title: const Text('标题5'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), // <-- 请看这里
          ),
          title: const Text('标题6'),
        ),
      ]),
    );
  }
}

问题在于ListView超出了SizedBox并且可以在SizedBox之外看到。

在移动列表之前
[![在此输入图像描述][1]][1]

在移动列表之后
[![在此输入图像描述][2]][2]

正如您所见，我尝试添加容器，但显然一旦我放东西上面，它会调整其宽度。是否有一个简单的解决方法可以使列表保持在SizedBox内？
看起来背景是透明的或其他什么的，但我无法通过更改MaterialApp的主题来解决它...
谢谢！
[1]: https://i.stack.imgur.com/yZi37.png
[2]: https://i.stack.imgur.com/J4DwJ.png


<details>
<summary>英文:</summary>
I&#39;m encountering a little issue which is surely easily resolvable but I can&#39;t find any solution. All the suggested subjetcs are about custom backgrounds...
Here is my code :

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

@override
State<HomeTest> createState() => _HomeTestState();
}

class _HomeTestState extends State<HomeTest> {
final courantController = TextEditingController();
@override
Widget build(BuildContext context) {
final soldes = FirebaseFirestore.instance.collection('Soldes');
return Scaffold(
appBar: AppBar(title: const Text('Test')),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(10),
child: Column(
children: [
const Text("text"),
const SizedBox(height: 20),
const Text(
'another text',
textAlign: TextAlign.center,
),
Container(
color: Colors.white,
height: 50,
),
const SizedBox(height: 10),
Container(
color: Colors.white,
height: 100,
child: Text('Container text')),
const AnnoyingList(),
],
),
),
));
}
}

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

@override
State<AnnoyingList> createState() => _AnnoyingListState();
}

class _AnnoyingListState extends State<AnnoyingList> {
@override
Widget build(BuildContext context) {
return SizedBox(
height: 250,
child: ListView(children: [
ListTile(
tileColor: const Color.fromARGB(93, 88, 127, 158),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 2),
borderRadius: BorderRadius.circular(50), //<-- SEE HERE
),
title: const Text('Tile 1'),
),
const SizedBox(height: 20),
ListTile(
tileColor: const Color.fromARGB(93, 88, 127, 158),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 2),
borderRadius: BorderRadius.circular(50), //<-- SEE HERE
),
title: const Text('Tile 2'),
),
const SizedBox(height: 20),
ListTile(
tileColor: const Color.fromARGB(93, 88, 127, 158),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 2),
borderRadius: BorderRadius.circular(50), //<-- SEE HERE
),
title: const Text('Tile 3'),
),
const SizedBox(height: 20),
ListTile(
tileColor: const Color.fromARGB(93, 88, 127, 158),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 2),
borderRadius: BorderRadius.circular(50), //<-- SEE HERE
),
title: const Text('Tile 4'),
),
const SizedBox(height: 20),
ListTile(
tileColor: const Color.fromARGB(93, 88, 127, 158),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 2),
borderRadius: BorderRadius.circular(50), //<-- SEE HERE
),
title: const Text('Tile 5'),
),
const SizedBox(height: 20),
ListTile(
tileColor: const Color.fromARGB(93, 88, 127, 158),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 2),
borderRadius: BorderRadius.circular(50), //<-- SEE HERE
),
title: const Text('Tile 6'),
),
]),
);
}
}

The issue is that the ListView goes outside the SizedBox and is viewable outside of it.
before moving the list
[![enter image description here][1]][1]
after moving the list
[![enter image description here][2]][2]
As you can see I tried to add container but obviously as soon as I put things on it, it adapts its width. Is there a simple solution for the list to stay inside the SizedBox ? 
It just seems that the backgrounds is transparent or something but I didn&#39;t manage to solve it by changing theme of materialapp...
thanks !
[1]: https://i.stack.imgur.com/yZi37.png
[2]: https://i.stack.imgur.com/J4DwJ.png
</details>
# 答案1
**得分**: 1
用卡片（Card）包裹每个`ListTile`。
```dart
Card(
child: ListTile(//...)
//...
)
英文:

Wrap every ListTile with Card

Card(
child: ListTile(//...)
//...
)

答案2

得分: 0

尝试在ListView中添加此参数。

physics: const NeverScrollableScrollPhysics(),
英文:

try adding this paramater in ListView.

physics: const NeverScrollableScrollPhysics(),

huangapple
  • 本文由 发表于 2023年4月13日 17:59:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76004117.html
  • dart
  • flutter
  • listview
  • sized-box
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定