时间戳

首页 > 解决方案 > Flutter 加载 Widget 类颜色

flutter - Flutter 加载 Widget 类颜色

问题描述

我再次回到这里，因为我使用颤振进行新编码，并且我在实验中学习。我想做的是制作一个全局加载小部件，可以调用它来显示具有指定颜色的加载小部件，并且想知道是否有人可以帮助我完成这个。

例如...

我更喜欢如何调用加载小部件：

LoadingWidget(Orange);

global_widgets.dart

import 'package:flutter/material.dart';
import 'package:myapp/res/colors.dart';

class LoadingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation<Color>(
        // Replace following with specified Color like, CustomColors.'specifield_color'??
        // CustomColors.[replace with specified color]
        CustomColors.Orange,
      ),
    );
  }
}

class AppBarTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.asset(
          'assets/logo.png',
          height: 20,
        ),
        SizedBox(width: 8),
        Text(
          'My',
          style: TextStyle(
            color: CustomColors.Navy,
            fontSize: 18,
          ),
        ),
        Text(
          'App',
          style: TextStyle(
            color: CustomColors.Orange,
            fontSize: 18,
          ),
        ),
      ],
    );
  }
}

colors.dart

import 'package:flutter/material.dart';

class CustomColors {
  static final Color Navy = Color(0xFF2C384A);
  static final Color Orange = Color(0xFFF57C00);
}

标签： flutterdartwidget

解决方案

customColor将类型的变量添加Color到LoadingWidget

class LoadingWidget extends StatelessWidget {

  final Color customColor;
  LoadingWidget(this.customColor);

  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation<Color>(
        customColor, // <--- // your specified color
      ),
    );
  }
}

现在您可以像这样调用小部件：LoadingWidget(CustomColors.Orange)

此要点包含工作代码，如果需要，您可以在 DartPad 上运行它。

推荐阅读