代码之家 › 专栏 › 技术社区 › John Joe Mayank Nema

Card的Flutter布局问题

dart listview flutter

John Joe Mayank Nema · 技术社区 · 4 年前

为什么如果我用卡片替换文本,我会出错?

return Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                        child: ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data.entity.workforce.length,
                      itemBuilder: (context, index) {
                        var item = snapshot.data.entity.workforce[index];
                        return Text(item['work_force_name']);
                      },
                    ))
                  ]);

上面的代码可以工作。但如果我改变 Text 到 Card ,我出错了

  return Card(
        elevation: 2,
        child: ListTile(
        dense: true,
        title: Text(item['work_force_name'].toString()),
        subtitle: Text(item['no_work_force'].toString()),
     ));

错误

RenderBox was not laid out: RenderRepaintBoundary#88567 relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
The relevant error-causing widget was
    ListView 
lib/ui/edit_status_esite_diary.dart:74
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ

ââââââââ Exception caught by rendering library âââââââââââââââââââââââââââââââââ
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 545 pos 12: 'child.hasSize': is not true.
The relevant error-causing widget was
    ListView 
lib/ui/edit_status_esite_diary.dart:74
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
Reloaded 194 of 1766 libraries in 10,279ms.

1 回复 | 直到 4 年前

Thierry 4 年前

由于您正在使用水平 ListView (无宽度限制)和a Card 默认情况下取最大宽度,您应该限制 width 的 卡片 s

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Map<String, String>> items = List.generate(10, (index) {
      return {
        'work_force_name': 'Work Force $index',
        'no_work_force': 'x00000$index',
      };
    }).toList();
    return SizedBox(
      height: 100,
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: items.length,
        itemBuilder: (context, index) {
          var item = items[index];
          return SizedBox(
            width: 150,
            child: Card(
              elevation: 2,
              child: ListTile(
                dense: true,
                title: Text(item['work_force_name'].toString()),
                subtitle: Text(item['no_work_force'].toString()),
              ),
            ),
          );
        },
      ),
    );
  }
}