Динамический интерфейс GridView List в флаттере - PullRequest
Новая
       60

Динамический интерфейс GridView List в флаттере

0 голосов
/ 11 апреля 2019

У меня есть такой дизайн:

Want to achieve

Я читал о GridView и нашел его достаточно сложным, чтобы получить результат. Я также следил за этим вопросом здесь: Flutter - Layout a Grid . Выяснил, что это для фиксированного списка, плюс список имеет другой интерфейс.

У меня есть информация, поступающая из 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)
     )
  ]
)

Результат, который я сейчас получаю:

Image I'm getting

Я бы хотел получить вышеупомянутый результат. В интерфейс добавлен встроенный верхний отступ. Я не знаю почему. Можете ли вы помочь мне, ребята?

Я попытался использовать crossAixCount: 2, и пользовательский интерфейс стал пустым. Любая помощь будет оценена. Спасибо:)

1 Ответ

1 голос
/ 11 апреля 2019

Может быть, я не получил вас, вы можете попробовать этот код, который дает вам подсказку, как вы можете сделать это по-своему, и дайте мне знать, если это то, что вы искали. 

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

enter image description here

...