时间戳

首页 > 解决方案 > GridView.count 适应子大小

flutter - GridView.count 适应子大小

问题描述

我正在尝试创建这个设计

设计形象

但这是我到目前为止所做的

输出图像

我正在使用 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"),
              ],
            ),
          ),

RoudedCategories 代码

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

标签： flutterdartflutter-layoutflutter-listviewflutter-gridview

解决方案

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

      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小部件，您可以将所有子级流向特定方向，保持它们的大小并在水平和垂直方向上采用可用间距。

推荐阅读