0

当我尝试使用GridView.count()“技能”下构建身体时,如设计所示,它不起作用,即网格视图根本不可见。我知道这可能是因为我在 Column 中使用它,并且建议的解决方案是用Expanded小部件包装它,但它也不起作用。然后它给出了“不正确使用 ParentDataWidget”错误。那么任何人都可以帮我解决这个问题吗?

代码的相关部分:

Widget _buildAboutView() {
    return SingleChildScrollView(
      child: Column(
        children: [
          AboutTile(
            title: 'Bio',
            child: Text(
              'I’ve always had a natural curiosity for machinery. As a child, I loved taking things apart and putting them back together. By the age of 12, I was building components for use in construction and even making a bit of pocket money for my troubles.',
              softWrap: true,
            ),
          ),
          AboutTile(
            title: 'Skills',
            child: Container(
              height: 100,
              child: Expanded(
                child: GridView.count(
                  crossAxisCount: 4,
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  children: [
                    SkillsBlock(title: 'Web Design'),
                    SkillsBlock(title: 'JavaScript'),
                    SkillsBlock(title: 'HTML'),
                    SkillsBlock(title: 'HTML'),
                    SkillsBlock(title: 'HTML'),
                    SkillsBlock(title: 'Web Design'),
                  ],
                ),
              ),
            ),
          ),
          Divider(
            color: AppTheme.black20,
          ),
        ],
      ),
    );
  }

about_tile.dart

import 'package:delta/app_theme.dart';
import 'package:flutter/material.dart';

class AboutTile extends StatelessWidget {
  final Widget child;
  final String title;

  const AboutTile({required this.title, required this.child, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: AppTheme.lightGrey,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    fontStyle: FontStyle.normal,
                    fontFamily: 'Poppins',
                    height: 2.4,
                    color: AppTheme.black100),
              ),
              IconButton(onPressed: () {}, icon: Icon(Icons.edit))
            ],
          ),
          SizedBox(
            height: 18,
          ),
          child,
        ],
      ),
    );
  }
}

skills_block.dart

import 'package:delta/app_theme.dart';
import 'package:flutter/material.dart';

class SkillsBlock extends StatelessWidget {
  final String title;

  const SkillsBlock({required this.title, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 91,
      height: 23,
      decoration: BoxDecoration(
        color: AppTheme.darkGrey,
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
      child: Text(
        title,
        style: TextStyle(
          fontSize: 12,
          fontWeight: FontWeight.w500,
          fontStyle: FontStyle.normal,
          fontFamily: 'Poppins',
          height: 1.8,
          color: AppTheme.lightGrey,
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}

它是如何发生的

该设计 : 它应该如何发生

4

2 回答 2

0

使用Wrap而不是GridView芯片小部件一起装饰。

AboutTile(
  title: 'Skills',
  child: Wrap(
    children: [
      Chip(label: Text('Web Design')),
于 2022-01-31T15:40:00.993 回答
0

Wrap像这样尝试:

 AboutTile(
   title: 'Skills',
   child: Container(
    child: Wrap(
     children: [
      SkillsBlock(title: 'Web Design'),
      SkillsBlock(title: 'JavaScript'),
      SkillsBlock(title: 'HTML'),
      SkillsBlock(title: 'HTML'),
      SkillsBlock(title: 'HTML'),
      SkillsBlock(title: 'Web Design'),
    ],
   )
  ),
),
于 2022-01-31T16:52:34.830 回答