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