flutter - GridView.count 适应子大小

Question

我正在尝试创建这个设计

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

我正在使用 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,
      ),
    );
  }
}

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