如何在单击单独的文件手势检测器按钮时随机更改脚手架颜色

Question

我做了两个文件...一个是main.dart另一个是homescreen.dart..homescreen是脚手架body的，是单独创建的....现在home有一个按钮用于改变脚手架颜色的屏幕....怎么办？主要目的是了解从其他有状态小部件 class 文件访问脚手架...

main.dart

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(child: Scaffold(body: HomeScreen(),)),
    );
  }
}

homescreen.dart

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        //My quiry is to PLACE CODE HERE TO CHANGE SCAFFOLD COLOR ON CLICKING
      },
      child: Center(
        child: Container(
          color: Colors.red,
          height: 60,
          width: 200,

          child: Center(child: Text('Change Color',)),

        ),
      ),

    );
  }
}

Answer 1

你可以这样做:

/// 编辑：

我编辑它以获得随机颜色

import 'dart:math' as math;

class _MyAppState extends State<MyApp> {
  Color _newColor = Colors.white; // variable with the color you want to change

  final rnd = math.Random(); // random
  Color getRandomColor() =>
      Color(rnd.nextInt(0xffffffff)); // little function to get the color random

  void _changeNewColor() { // function that you are going to send to yout HomeScreen
    setState(() {
      _newColor = getRandomColor();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: HomeScreen(change: _changeNewColor), // function
      backgroundColor: _newColor, // here the variable
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({
    Key? key,
    this.change,
  }) : super(key: key);

  final Function()? change; // instance and get the funct

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: change,
      child: Center(
        child: Container(
          color: Colors.red,
          height: 60,
          width: 200,
          child: const Center(
              child: Text(
            'Change Color',
          )),
        ),
      ),
    );
  }
}

Answer 2

试试这个：

main.dart

import 'package:flutter/material.dart';

import 'home.dart';
import 'dart:math' as math;


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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Color _color = Colors.white;

  void changeColor(){
    setState(() {
      _color = Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(child: Scaffold(
        backgroundColor: _color,
        body: HomeScreen(changeColor: changeColor,),)),
    );
  }
}

home.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  VoidCallback? changeColor;
  HomeScreen({Key? key, this.changeColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: changeColor,
      child: Center(
        child: Container(
          color: Colors.red,
          height: 60,
          width: 200,
          child: const Center(
            child: Text(
              'Change Color',
            ),
          ),
        ),
      ),
    );
  }
}

如何在单击单独的文件手势检测器按钮时随机更改脚手架颜色

How to change scaffold colour randomly on clicking separate file's gesturdetector button

flutter

scaffold