创建一个构建方法，该方法随机选择一个类的一个对象并在其中传递对象的参数答案

【问题标题】：Create a build method which randomly selects one object of a class and transfers in it parameters of object创建一个构建方法，该方法随机选择一个类的一个对象并在其中传递对象的参数
【发布时间】：2021-12-26 17:32:07
【问题描述】：

我是 Flutter（飞镖）的新手。我创建了一个包含三个字段（frontColor、angle 和 backColor）的类，同样基于这个类我创建了六个带参数的对象（这里我只插入其中两个）。我需要一个小部件，它会随机选择一个对象并在子级中使用 SizedBox 显示它（这里必须是我们的小部件），例如：

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

这是我创建的类和对象：

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('...'),
    ),
  ),
);}

【问题讨论】：

标签： flutter dart mobile android-emulator flutter-layout

【解决方案1】：

您可以使用流，在 statefulWidget 中添加一个 Widget 类型的变量作为状态变量，然后在 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。

【讨论】：