创建一个构建方法，它随机选择 class 中的一个 object 并在其中传输 object 的参数

Question

我是 flutter (dart) 的新手。我创建了一个包含三个字段（frontColor、angle 和 rearColor）的 class，同样基于此 class 我创建了六个带有参数的 objects（这里我只插入其中两个）。我需要一个小部件，它将随机 select objects 之一并使用 SizedBox 在 child 中显示它（这里必须是我们的小部件），例如:

Center(
  child: SizedBox(
    height: 142,
    width: 141,
    child: ... 
  ),
),

这是我创建的 class 和 objects：

class Circle {
 Color frontColor;
 ColorFilter rearColor;
 double angle;

 Circle(
  this.frontColor,
  this.rearColor,
  this.angle,
 );
}
Circle firstCircle = Circle(
 const Color(0xFF41AB9D),
 const ColorFilter.mode(Color(0xFF49C1B0), BlendMode.srcATop),
 0.0,
);
Circle fourthCircle = Circle(
 const Color(0xFF49C1B0),
 const ColorFilter.mode(Color(0xFF41AB9D), BlendMode.srcATop),
 360 / 30,
);

结果我应该得到类似的东西，但参数必须从外部传输：

Widget _circleBackground() {
  return Container(
  width: 141,
  height: 142,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(2500.0),
    color: const Color(0xFF41AB9D),
    image: const DecorationImage(
      colorFilter: ColorFilter.mode(Color(0xFF49C1B0), BlendMode.srcATop),
      image: AssetImage('...'),
    ),
  ),
);}

Answer 1

可以使用stream，在statefulWidget中添加一个Widget类型的变量作为state变量，然后在listen中修改该变量，如下所示：

在 main.dart 上：

    import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:futurebuildertest/circle.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget child = Container();
  final List<Circle> widgets = [firstCircle, secondCircle, fourthCircle];
  final StreamController streamController = StreamController();

  @override
  void initState() {
    super.initState();
    child = _circleBackground(firstCircle);
    streamController.stream.listen((_) {
      Circle param = widgets[Random().nextInt(3)];
      setState(() {
        child = _circleBackground(param);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Column(children: [
        Expanded(
          child: Center(child: child)
        ),
        ElevatedButton(
          onPressed: () {
            streamController.add("");
          },
          child: Container(
            padding: const EdgeInsets.all(16),
            child: const Text("Change"),
          )
        )
      ]),
    );
  }

  Widget _circleBackground(Circle circle) {
    return Container(
      width: 141,
      height: 142,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(2500.0),
        color: circle.frontColor,
      ),
      child: const SizedBox(
        height: 100,
        width: 100,
      ),
    );
  }
}

在 circle.dart

import 'package:flutter/material.dart';

class Circle {
  final Color frontColor;
  final ColorFilter rearColor;
  double angle;

  Circle(
    this.frontColor,
    this.rearColor,
    this.angle,
  );
}
Circle firstCircle = Circle(
  const Color(0xFFF56302),
  const ColorFilter.mode(Color(0xFF49C1B0), BlendMode.srcATop),
  0.0,
);
Circle secondCircle = Circle(
  const Color(0xFF1EFF00),
  const ColorFilter.mode(Color(0xFF41AB9D), BlendMode.srcATop),
  360 / 30,
);
Circle fourthCircle = Circle(
  const Color(0xFF49C1B0),
  const ColorFilter.mode(Color(0xFF41AB9D), BlendMode.srcATop),
  360 / 30,
);

这只是一个演示如何完成的 poc。

创建一个构建方法，它随机选择 class 中的一个 object 并在其中传输 object 的参数

Create a build method which randomly selects one object of a class and transfers in it parameters of object

mobile

android-emulator

dart

flutter

flutter-layout