如何更改文本颜色,这是在一个不同的小部件上切换与Flutter提供商?

mznpcxlj  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(127)

如何更改文本颜色,这是在一个不同的小部件上切换与Flutter提供商?
当开关打开时,将文本颜色更改为红色,否则更改为绿色。但是不要合并第一个和第二个小部件。
当点击开关按钮更改其他小部件的文本。

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

void main() => runApp(const SwitchApp());

class SwitchApp extends StatelessWidget {
  const SwitchApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Switch Sample')),
        body: const Center(
          child: SwitchExample(),
        ),
      ),
    );
  }
}

class SwitchExample extends StatefulWidget {
  const SwitchExample({super.key});

  @override
  State<SwitchExample> createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool light = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(
          value: light,
          activeColor: Colors.red,
          onChanged: (bool value) {
            setState(() {
              light = value;
            });
          },
        ),
        MyText()
      ],
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Change my color',
        style: TextStyle(color: Colors.green));
  }
}

ih99xse1

ih99xse11#

最简单的方法是将颜色向下传递到MyText小部件的构造函数中,因为MyText小部件是作为SwitchExample的子对象构建的,SwitchExample正在处理开关状态。

import 'package:provider/provider.dart';

void main() => runApp(const SwitchApp());

class SwitchApp extends StatelessWidget {
  const SwitchApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Switch Sample')),
        body: const Center(
          child: SwitchExample(),
        ),
      ),
    );
  }
}

class SwitchExample extends StatefulWidget {
  const SwitchExample({super.key});

  @override
  State<SwitchExample> createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool light = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(
          // This bool value toggles the switch.
          value: light,
          activeColor: Colors.red,
          onChanged: (bool value) {
            // This is called when the user toggles the switch.
            setState(() {
              light = value;
            });
          },
        ),
        MyText(light ? Colors.green : Colors.blue)
      ],
    );
  }
}

class MyText extends StatelessWidget {
  final Color color;
  const MyText(this.color, {super.key});

  @override
  Widget build(BuildContext context) {
    return Text('Change my color',
        style: TextStyle(color: color));
  }
}

但是,如果你想使用provider,这样MyText就可以成为树中provider小部件下面任何地方的子小部件,你可以将Provider与ChangeNotifier一起使用:

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

void main() => runApp(const SwitchApp());

class ColorModel extends ChangeNotifier {
  Color color = Colors.green;
  void setColor(Color color) {
    this.color = color;
    notifyListeners();
  }
}

class SwitchApp extends StatelessWidget {
  const SwitchApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ColorModel>(
      create: (context) => ColorModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('Switch Sample')),
          body: const Center(
            child: SwitchExample(),
          ),
        ),
      ),
    );
  }
}

class SwitchExample extends StatefulWidget {
  const SwitchExample({super.key});

  @override
  State<SwitchExample> createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool light = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(
          // This bool value toggles the switch.
          value: light,
          activeColor: Colors.red,
          onChanged: (bool value) {
            // This is called when the user toggles the switch.
            setState(() {
              light = value;
            });
            Provider.of<ColorModel>(context, listen: false)
                .setColor(value ? Colors.green : Colors.blue);
          },
        ),
        MyText()
      ],
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<ColorModel>(builder: (context, state, _) {
      return Text('Change my color', style: TextStyle(color: state.color));
    });
  }
}

查看Flutter的文档以获取更多信息:https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple

相关问题