卡的颤振布局问题

debugcn 发表于 Dev

约翰·乔

为什么用Card替换Text会出现错误？

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.

蒂埃里

由于正在使用的水平ListView（无宽度限制）和Card默认取最大宽度，应该限制width的的Card第

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()),
              ),
            ),
          );
        },
      ),
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。