无法在flutter listview中创建列和行

tnkciper 于 2023-11-21 发布在 Flutter

关注(0)|答案(4)|浏览(171)

bounty将在2天后过期。回答此问题有资格获得+50声望奖励。mkHun正在寻找规范答案。

我是初学者扑，我试图添加新的列，第一个是默认可见的，第二个是可见的（这是需要做的，我已经有代码，但在添加东西之前，我试图设置它）的行动。所以我已经更新了列的代码，但如果我这样做，所有的卡都显示为空，不知道我在哪里制造的问题

@override
  Widget build(BuildContext context) {
    var img = widget.data['password'];
    return Card(
      // borderOnForeground: true,
      color: const Color.fromARGB(255, 55, 55, 55),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
        side: const BorderSide(
          color: Color.fromARGB(255, 60, 60, 60),
          width: 1.0,
        ),
      ),
      child: ClipPath(
        clipper: ShapeBorderClipper(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
        ),
        child: Container(
          height: 150,
          decoration: const BoxDecoration(
            border: Border(
              left: BorderSide(
                  color: Color.fromARGB(255, 143, 175, 112), width: 10),
            ),
            color: Color.fromARGB(255, 242, 241, 241),
          ),
          padding: const EdgeInsets.all(10.0),
          // alignment: Alignment.centerLeft,
          child: Row(
            children: [
              Expanded(
                flex: 4,
                child: Container(
                    // child: Column( //!!!!!!!!!!!!!!!!!If I add this line of code to make two columns it is displaying only the above container
                    children: [
                    Row(
                  children: [
                    Expanded(
                      flex: 9,
                      child: Container(
                        child: Column(children: [
                          const SizedBox(height: 10),
                          Image.asset(
                            'assets/bank_logos/$img.png',
                            height: 60,
                          ),

                          // Icon(
                          //   Icons.card_membership,
                          //   color: Color.fromARGB(255, 183, 183, 183),
                          //   size: 50.0,
                          //   semanticLabel:
                          //       'Text to announce in accessibility modes',
                          // ),
                          const Spacer(),
                          Text(img),
                          const SizedBox(height: 10),
                        ]),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: CustomPaint(painter: DashedLinePainter()),
                    ),
                  ],
                )),
              ),
              Expanded(
                flex: 6,
                child: Container(
                  child: Column(children: [
                    const SizedBox(height: 15),
                    const Row(
                      children: [
                        Icon(
                          Icons.person,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        SizedBox(width: 5),
                        Text("Hussain"),
                        SizedBox(width: 15),
                        Icon(
                          Icons.content_copy,
                          color: Color.fromARGB(255, 168, 168, 168),
                          size: 18.0,
                        ),
                      ],
                    ),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        const Icon(
                          Icons.lock,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        const SizedBox(width: 5),
                        const Text("*****"),
                        const SizedBox(width: 15),
                        IconButton(
                          onPressed: () {
                            print("copied");
                          },
                          icon: const Icon(
                            Icons.content_copy,
                            color: Color.fromARGB(255, 168, 168, 168),
                            size: 18.0,
                          ),
                        ),
                      ],
                    ),
                  ]),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

字符串

flutter

来源：https://stackoverflow.com/questions/77468298/not-able-to-create-column-and-row-in-flutter-listview

4条答案

按热度按时间

s2j5cfk01#

问题是您有两个嵌套列：

Expanded(
                flex: 4,
                child: Column(
                  // ---> Column 1
                  children: [
                    Row(
                      children: [
                        Expanded(
                          flex: 9,
                          child: Container(
                            child: Column(// ---> Column 2
                                children: [
                              const SizedBox(height: 10),

字符串
最快的解决方案是为第二列设置固定高度。
您可以折绕SizedBox()并加入高度。
或者，由于Column2正上方已经有一个未使用的容器，因此可以只添加一个固定高度：

Expanded(
                flex: 4,
                child: Column(
                  // ---> Column 1
                  children: [
                    Row(
                      children: [
                        Expanded(
                          flex: 9,
                          child: Container(
                            // ---> Add a fixed height container
                            height: 100,
                            child: Column(// ---> Column 2
                                children: [
                              const SizedBox(height: 10),

型

赞(0）回复(0）举报 2023-11-21

2ekbmq322#

试试这个，它会工作。

@override
  Widget build(BuildContext context) {
    var img = widget.data['password'];
    return Card(
      borderOnForeground: true,
      color: const Color.fromARGB(255, 55, 55, 55),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
        side: const BorderSide(
          color: Color.fromARGB(255, 60, 60, 60),
          width: 1.0,
        ),
      ),
      child: ClipPath(
        clipper: ShapeBorderClipper(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
        ),
        child: Container(
          height: 150,
          decoration: const BoxDecoration(
            border: Border(
              left: BorderSide(
                  color: Color.fromARGB(255, 143, 175, 112), width: 10),
            ),
            color: Color.fromARGB(255, 242, 241, 241),
          ),
          padding: const EdgeInsets.all(10.0),
          // alignment: Alignment.centerLeft,
          child: Row(
            children: [
              Expanded(
                child: Row(
                  children: [
                    Container(
                      child: Column(children: [
                        const SizedBox(height: 10),
                        const Text('Image should be here'),
                        Image.asset(
                          'assets/bank_logos/$img.png',
                          height: 60,
                        ),
                        Icon(
                          Icons.card_membership,
                          color: Color.fromARGB(255, 183, 183, 183),
                          size: 50.0,
                          semanticLabel:
                              'Text to announce in accessibility modes',
                        ),
                        const Spacer(),
                        Text(img),
                        const SizedBox(height: 10),
                      ]),
                    ),
                    CustomPaint(painter: DashedLinePainter())
                  ],
                ),
              ),
              Column(children: [
                const SizedBox(height: 15),
                const Row(
                  children: [
                    Icon(
                      Icons.person,
                      color: Color.fromARGB(255, 93, 93, 93),
                      size: 22.0,
                    ),
                    SizedBox(width: 5),
                    Text("Hussain"),
                    SizedBox(width: 15),
                    Icon(
                      Icons.content_copy,
                      color: Color.fromARGB(255, 168, 168, 168),
                      size: 18.0,
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                Row(
                  children: [
                    const Icon(
                      Icons.lock,
                      color: Color.fromARGB(255, 93, 93, 93),
                      size: 22.0,
                    ),
                    const SizedBox(width: 5),
                    const Text("*****"),
                    const SizedBox(width: 15),
                    IconButton(
                      onPressed: () {
                        print("copied");
                      },
                      icon: const Icon(
                        Icons.content_copy,
                        color: Color.fromARGB(255, 168, 168, 168),
                        size: 18.0,
                      ),
                    ),
                  ],
                ),
              ]),
            ],
          ),
        ),
      ),
    );
  }

字符串

赞(0）回复(0）举报 2023-11-21

bvjveswy3#

这主要是因为ListView，Row和Column试图尽可能地增长，当你把一个ListView作为一个Column的孩子，或者把一个Column作为一个ListView的孩子，而没有约束时，它们会增长到无穷大，这是不好的。如果Column被用作子元素，你可以使用mainAxisSize属性并将其设置为最小大小：mainAxisSize: MainAxisSize.min

赞(0）回复(0）举报 2023-11-21

bz4sfanl4#

在您的代码中，您使用Expanded小部件创建了两个列。这个问题可能与小部件树的结构有关。您在另一个Expanded小部件中使用Expanded小部件，这有时会导致布局问题。

Remove the extra Expandedwidget：似乎你有一个额外的Expanded小部件 Package 你的整个Row小部件。尝试删除外部Expanded小部件，看看它是否解决了这个问题。

child: Container(
  // Remove the outer Expanded widget
  children: [
    Row(
      children: [
        // Your existing code
      ],
    ),
  ],
),

字符串
1.确保内部Row设置了MainAxisAlignment：确保设置了内部Row小部件的mainAxisAlignment属性。此属性确定子部件应如何沿主轴（在本例中为水平轴）沿着放置。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // Adjust as needed
  children: [
    // Your existing code
  ],
),

型
1.检查控制台中的错误：在控制台中查找任何错误消息或警告。Flutter通常提供有用的消息，可以指导您识别布局问题。
1.检查DashedLinePainter和其他自定义小部件：确保您的自定义小部件（DashedLinePainter和其他）正确实现，并且不会导致任何渲染问题。

赞(0）回复(0）举报 2023-11-21

我来回答

无法在flutter listview中创建列和行

4条答案

相关问题

热门标签

最新问答