Блог

Главная - Вопросы по программированию - Как создать сетку сложенных изображений в приложении Flutter?

Как создать сетку сложенных изображений в приложении Flutter?

#flutter #dart #flutter-layout

#flutter #dart #flutter-макет

Вопрос:

Что я хочу создать

На следующем рисунке показан макет, который я хочу создать в приложении Flutter.

Изображение

Код

Затем я написал следующий код.

 // main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Board(),
      debugShowCheckedModeBanner: false,
    );
  }
} 

class Board extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(12),
      crossAxisSpacing: 4,
      mainAxisSpacing: 4,
      crossAxisCount: 5,
      children: List.generate(30, (index) {
        return Container(
          child: Column(
            List.generate(3, (index) {
              return FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 0.3333,
                child: Image(image: AssetImage("assets/piece_b.png"))
              );
            })
          )
        );
      })
    );
  })
  }
}

// pubspec.yaml
flutter:
  assets:
    - assets/piece_b.png
    - assets/piece_w.png

Ошибка

Однако было сообщено о следующей ошибке.

 Error: Too many positional arguments: 0 allowed, but 1 found.
Try removing the extra positional arguments.
            child: Column(
                         ^

Как мне создать макет flutter, подобный изображению?

Ответ №1:

внутри Column должно быть children: , вы пропустили это

 import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Board(),
      debugShowCheckedModeBanner: false,
    );
  }
} 

class Board extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(12),
      crossAxisSpacing: 4,
      mainAxisSpacing: 4,
      crossAxisCount: 5,
      children: List.generate(30, (index) {
        return Container(
          child: Column(
            children:List.generate(3, (index) {
              return FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 0.3333,
                child: Image(image: AssetImage("assets/piece_b.png"))
              );
            })
          )
        );
      })
    );
  })
  }
}

дайте мне знать в комментариях, если вам нужна дополнительная помощь

Ответ №2:

Вы должны предоставить свой список дочерним элементам в столбце

например: столбец (дочерние элементы: ваш список здесь)

Метки: