在Flutter中，通过容器垂直填充ListView磁贴

Question

19 浏览2023年3月12日

匿名的 2023年3月13日

0 Comments

我一直在尝试在我的Flutter应用程序的卡片的最左边边缘上放置一个线性指示器。我尝试了很多方法都没有成功。

这里有一个确切的问题here，实际上这就是我一直在努力解决的问题。

被接受的解决方案的问题是它限制了硬编码值的高度，而我不想要这样。我希望颜色可以自动填充卡片的高度。

问题是：

enter image description here

我尝试了所有三种解决方案，但都不适用于我的用例。

第一个解决方案的输出

在这里，我必须将值硬编码为较大的值，以使显示的所有文本都位于其中。我认为这不是一个解决方案。

Card(


            key: ObjectKey(noteList[index]),
            elevation: 2.0,
            child: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                    width: 4,
                    color: Color(noteList[index].intcolor),
                  ),
                  Flexible(
                    flex: 100,
                    child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~

芯片超出范围

第二个解决方案的输出

这根本没有显示任何内容。

Card(


            key: ObjectKey(noteList[index]),
            elevation: 2.0,
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    constraints: BoxConstraints.expand(),
                    color: Color(noteList[index].intcolor),
                  ),
                ),
                Flexible(
                  flex: 100,
                  child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~

根本没有输出

最后一个解决方案的输出

容器中没有颜色。

容器中没有颜色

非常感谢。

更新1（2020年4月6日，晚上8:16 GMT）

添加了代码和存储库以便于复制。

存储库

main.dart

import 'package:flutter/material.dart';


void main() {
  List notes = [
    "fluttermaster.com",
    "Update Android Studio to 3.3",
    "Something long Something long Something long Something long Something long Something long",
  ];
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Simple Note ListView"),
      ),
      body: Container(
          color: Colors.white10,
          padding: EdgeInsets.all(16.0),
          child: HomePage(notes)),
    ),
  ));
}
class HomePage extends StatelessWidget {
  final List notes;
  HomePage(this.notes);
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: notes.length,
      itemBuilder: (context, pos) {
        return Padding(
            padding: EdgeInsets.only(bottom: 16.0),
            child: Card(
              elevation: 2.0,
              child: Row(
                // key: _cardKey,
                children: [
                  Flexible(
                    flex: 1,
                    child: Container(
                      // -------------------- This here ----------------------------------------------
                      // FixMe : This shouldn't be hardcoded, rather it should fill the height of it's parent element, in this case card
                      // https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407
                      height: 71,
                      color: Colors.green,
                      // -------------------- This here ----------------------------------------------
                    ),
                  ),
                  Flexible(
                    flex: 100,
                    child: ListTile(
                      // For center alignment from vertical and horizontal : https://stackoverflow.com/a/51546279
                      // Since using CircleAvatar does this but it decreases size of icon too : https://github.com/flutter/flutter/issues/16061
                      leading: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Icon(Icons.receipt),
                        ],
                      ),
                      title: Text(
                        notes[pos],
                      ),
                      subtitle: Row(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(notes[pos].substring(0, 10)),
                          // What is the best way to optionally include a widget in a list of children
                          // https://github.com/flutter/flutter/issues/3783#issuecomment-506019822
                          if ((pos % 2) == 0)
                            Chip(
                              avatar: CircleAvatar(
                                backgroundColor: Colors.grey.shade800,
                                child: Icon(Icons.timer),
                              ),
                              label: Text('2FA'),
                            ),
                        ],
                      ),
                      trailing: Padding(
                        padding: EdgeInsets.all(10),
                        child: Wrap(
                            spacing: 10,
                            direction: Axis.vertical,
                            alignment: WrapAlignment.spaceEvenly,
                            children: [
                              IconButton(
                                icon: Icon(
                                  Icons.check,
                                  color: Colors.grey,
                                ),
                                onPressed: () {},
                              )
                            ]),
                      ),
                      onTap: () {},
                    ),
                  ),
                ],
              ),
            ));
      },
    );
  }
}

0

1 答案

匿名的 · Answer 1 · 2023-07-10T07:22:49+00:00

问题的出现原因是希望通过ListView来垂直填充一个容器，但是默认情况下ListView的每个子项的宽度是根据内容自动调整的，无法填充满整个容器。

解决方法之一是使用Stack组件。在ListView.builder中，通过使用Stack组件将每个子项包裹起来，然后在Stack中添加一个Positioned组件作为容器的背景色。这样就可以实现将ListView的子项垂直填充满容器。

另一种可行的解决方法是通过在Stack组件中使用Align组件来实现。具体的解决方法可以参考reddit.com上的一个帖子。

整体来说，以上是关于如何通过在Flutter中使用ListView来垂直填充一个容器的问题的两种解决方法。通过使用Stack或Align组件，可以实现将ListView的子项垂直填充满容器。