Flutter 中的动态 GridView 列表 UI

Posted 2023-02-23

【中文标题】Flutter 中的动态 GridView 列表 UI

【英文标题】：Dynamic GridView List UI in flutter

【发布时间】：2019-09-02 00:25:10

【问题描述】：

我有一个这样的设计：

我一直在阅读 GridView 并发现它足够复杂，可以得到结果。我也在这里关注了这个问题：Flutter - Layout a Grid。发现这是针对固定列表的，而且列表有不同的 UI。

我有来自 API 的信息，并且我有一个名为 MoreInfo() 的小部件，它有一个要从 API 传递的文本参数。

我已经实现了我想要从列表中获取字符串的目标。只是我试图得到结果，但没有很好地给出结果。

将列表添加到小部件：

GridView getOtherInfo(BuildContext context)
  List<String> _yesElems = [];
  List<Widget> _widget = [];

  this.userBarModel.barModel.otherInfo.yes.forEach((item)
    _yesElems.add(item);
  );

  _yesElems.forEach((o)
    _widget.add(MoreInfoWidget(text: o));
  );

  return GridView.count(
    crossAxisCount: 4,
    children: _widget
  );

用户界面代码：

Column(
  corssAxisalignment: CrossAxisAlignment.stretch;
  children: <Widget>[
     Padding(
       padding: EdgeInsets.only(top: 9.0),
       child: Text("MORE INFO",
           style: TextStyle(color: Color.fromRGBO(183, 193, 203, 1), fontWeight: FontWeight.bold, fontSize: 11.0))
     ),
     SizedBox(height: 11.4),
     Container(
        height: 140,
        child: getOtherInfo(context)
     )
  ]
)

我现在得到的结果是：

我想得到上述结果。 UI 中添加了内置的顶部填充。我不知道为什么。你们能帮帮我吗，伙计们？

我尝试使用crossAixCount: 2，但用户界面变为空白。任何帮助，将不胜感激。谢谢:)

【参考方案1】：

也许我没听懂你，你能试试这段代码吗？它会提示你如何按照自己的方式去做，如果这就是你要找的，请告诉我。

List<int> _list = [];

math.Random random = math.Random();

@override
void initState() 
  super.initState();

  Timer.periodic(Duration(milliseconds: 1000), (timer) 
    _list.add(random.nextInt(100));
    setState(() );
  );


Widget build(context) 
  return Scaffold(
    appBar: AppBar(),
    body: GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 160,
      childAspectRatio: 3,
      children: _list.map((value) 
        return Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(8),
          decoration: BoxDecoration(border: Border.all(color: Colors.black),),
          child: Text("Item $value"),
        );
      ).toList(),
    ),
  );

【讨论】：

如您所见，我需要连续两个。你能证明一下吗？有关更多信息，请参阅设计。该设计与我正在寻找的当前事物完全不匹配。

还有一个问题，因为我必须给出容器的高度。我有一张正在获取这些数据的卡。但是当我不给出高度时，它就会消失。我想要包装内容并使卡片看起来干净的高度。我现在给了 100，我认为这不是正确的工作方式。谢谢

没有必要明确给出height。你可以和childAspectRatio: 3一起玩，非常安全。

不适合我。抛出很多错误。 flutter: parentData: <none> (can use size) flutter: constraints: BoxConstraints(w=327.6, 0.0<=h<=Infinity) flutter: layer: OffsetLayer#c1b27 DETACHED flutter: size: MISSING flutter: axisDirection: down flutter: crossAxisDirection: right flutter: offset: ScrollPositionWithSingleContext#d64ad(offset: 0.0, range: null..null, viewport: null,。我正在使用childAspectRatio: 6，但无法正常工作。

好的。谢谢您的帮助。非常感谢。 :)