// ignore_for_file: dead_code
// import 'dart:js';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:transparent_image/transparent_image.dart';

class HomePageView extends GetView {
  const HomePageView({super.key});

  @override 
  Widget build(BuildContext context) {
    const title = "壁纸";
    final SizedBox headerView = getHeaderWidget(context);
    final GridView bodyView = getBodyWidget();

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Row(
          children: [
            headerView,
            // bodyView,
          ],
        ),
      ),
    );
  }

  //返回内容
  GridView getBodyWidget(){
    return GridView.count(
              // Create a grid with 2 columns. If you change the scrollDirection to
              // horizontal, this produces 2 rows.
              crossAxisCount: 2,
              // Generate 100 widgets that display their index in the List.
              children: List.generate(100, (index) {
                return Center(
                  child: FadeInImage.memoryNetwork(
                    placeholder: kTransparentImage,
                    image: 'https://picsum.photos/250?image=9',
                  ),
                );
              }),
            );
  }

  //初始化顶部数据
    SizedBox getHeaderWidget(BuildContext context){
      final size = MediaQuery.of(context).size;
      final cw = 80.0;

      return SizedBox(
                width: size.width,
                height: 40,
                child: ListView(
                          scrollDirection: Axis.horizontal,
                          children: <Widget>[
                                Container(
                                  width: cw,
                                  color: Colors.red,
                                ),
                                Container(
                                  width: cw,
                                  color: Colors.blue,
                                ),
                                Container(
                                  width: cw,
                                  color: Colors.green,
                                ),
                                Container(
                                  width: cw,
                                  color: Colors.yellow,
                                ),
                                Container(
                                  width: cw,
                                  color: Colors.orange,
                                ),
                              ],
                        ),
              );
    
    }

}