GridView.count 适应子大小

Posted 2023-02-23

【中文标题】GridView.count 适应子大小

【英文标题】：GridView.count adapt with child size

【发布时间】：2021-12-20 10:56:17

【问题描述】：

我正在尝试创建这个设计

但这是我迄今为止所做的

我正在使用 gridview.count，我的问题是如何阻止我的子容器从父 gridView 容器高度继承，或者任何解决方法都将有助于

这里是重要的代码：

  Container(
            height: height(context) * 0.2,
            child: GridView.count(
              scrollDirection: Axis.horizontal,
              crossAxisCount: 2,
              children: [
                RoudedCategories("Busines"),
                RoudedCategories("social"),
                RoudedCategories("incubation"),
                RoudedCategories("incubation"),
                RoudedCategories("incubation"),
                RoudedCategories("incubation"),
                RoudedCategories("fire"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
                RoudedCategories("Stupid"),
              ],
            ),
          ),

RodedCategories 代码

class RoudedCategories extends StatelessWidget 
  const RoudedCategories(this.text, Key? key) : super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) 
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      margin: EdgeInsets.only(right: 10, bottom: 10),
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey,
          ),
          borderRadius: BorderRadius.circular(15)),
      child: Text(
        text,
        style: textTheme(context).bodyText2,
      ),
    );
  

【参考方案1】：

我认为您为此使用了错误的小部件。看看这个：

      Padding(
        padding: const EdgeInsets.all(10.0),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          controller: ScrollController(),
          child: SizedBox(
            width: MediaQuery.of(context).size.width * 1.5,
            child: Wrap(
              direction: Axis.horizontal,
              spacing: 5.0,
              runSpacing: 5.0,
              runAlignment: WrapAlignment.spaceEvenly,
              children: const [
                RoudedCategories('Text Sample'),
                RoudedCategories('Text Sam'),
                RoudedCategories('Text Sample 3'),
                RoudedCategories('Text 2'),
                RoudedCategories('Another Text Sample'),
                RoudedCategories('Text Sample Al'),
                RoudedCategories('Small Text Sample'),
                RoudedCategories('Text Sle'),
                RoudedCategories('Text Sample'),
                RoudedCategories('Text 5'),
                RoudedCategories('Text Sample'),
                RoudedCategories('Text Example'),
                RoudedCategories('Text Sample'),
                RoudedCategories('Text Sam'),
                RoudedCategories('Text Sample 3'),
                RoudedCategories('Text 2'),
                RoudedCategories('Another Text Sample'),
                RoudedCategories('Text Sample Al'),
                RoudedCategories('Small Text Sample'),
                RoudedCategories('Text Sle'),
              ],
            ),
          ),
        ),
      ),

使用Wrap 小部件，您可以使所有子级按特定方向流动，保持其大小并在水平和垂直方向上采用可用间距。

【讨论】：

哇，非常感谢，成功了

我不得不改变这个宽度：MediaQuery.of(context).size.width * 4.0,

好的，很高兴它对您有所帮助。您可以将此标记为正确答案。

我还没有足够的声誉来做这件事

@nonsoedu 您确实有足够的声誉来接受答案。点击该答案左侧得分下方的“复选标记”。