flutter_nayou/lib/app/modules/node/views/node_view.dart

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../../../component/sys_app_bar.dart';
import '../controllers/node_controller.dart';

class NodeView extends GetView<NodeController> {
  const NodeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final _refreshIndicatorKey = GlobalKey<RefreshIndicatorState>();


    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/node/nodebg.png"),
          fit: BoxFit.fill,
        ),
      ),
      child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: const SysAppBar(
            title: Text("节点列表"), toolbarHeight: kToolbarHeight + 40,),
          body: Container(
            width: 376,
            height: 600,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("images/node/nodetablebg.png"),
                fit: BoxFit.fill,
              ),
            ),
            child: Padding(
              padding: EdgeInsets.all(30.0),
              child: Column(
                children: [
                  // 错误消息展示
                  Obx(() {
                    if (controller.errorMsg.value.isNotEmpty) {
                      return Text(controller.errorMsg.value,
                          style: TextStyle(color: Colors.red));
                    }
                    return const SizedBox.shrink(); // 返回一个不占空间的widget
                  }),

                  // 加载指示器
                  Obx(() {
                    if (controller.isLoading.value) {
                      return const CircularProgressIndicator();
                    }
                    return const SizedBox.shrink();
                  }),

                  Expanded(
                    child: Obx(() {
                      return RefreshIndicator(
                        key: _refreshIndicatorKey,
                        onRefresh: controller.fetchNodes,
                        child: ListView.builder(
                          itemCount: controller.nodeModes.length,
                          itemBuilder: (BuildContext context, int index) {
                            final node = controller.nodeModes[index];

                            return InkWell(
                                onTap: () {
                                  print("Item at index $index was tapped.");
                                  controller.selectedIndex.value = index;
                                },
                                child: Obx(() {
                                  final color = controller.selectedIndex.value == index
                                      ? Colors.blueAccent
                                      : null;
                                  return Container(
                                    color: color,
                                    child: ListTile(
                                      title: Text(node.name.toString()),
                                    ),
                                  );
                                })
                            );
                          },
                        ),
                      );
                    }),
                  ),
                ],
              ),
            ),
          )

      ),
    );
  }
}