基于角色渲染 Flutter Widget 的指令答案

【问题标题】：Directive To Render Flutter Widget Role Based基于角色渲染 Flutter Widget 的指令
【发布时间】：2022-06-19 23:30:06
【问题描述】：

我不确定如何在 Flutter 中实现指令。

我在 Angular 中有以下代码，它根据用户的角色动态创建渲染元素的指令。我想在 Fluter 中实现。如何在 Flutter 中编写代码。

指令类

import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { AccountService } from '../../core/services/account.service';

@Directive({
  selector: '[appHasRole]'
})
export class HasRoleDirective implements OnInit{
  @Input() appHasRole: string[];

  constructor(private viewContainerRef: ViewContainerRef,
    private templateRef: TemplateRef<any>,
    private accountService: AccountService) {}

    ngOnInit(): void {
      const isAuthorized = this.accountService.isAuthorized('Role', this.appHasRole);
      if (!isAuthorized) {
        this.viewContainerRef.clear();
      } else {
        this.viewContainerRef.createEmbeddedView(this.templateRef);
      }
    }
}

如何使用

  <a *appHasRole='["SuperAdmin","Admin"]' mat-list-item routerLink="users">
    View Users
  </a>

【问题讨论】：

标签： angular flutter directive

【解决方案1】：

我找到了创建包装小部件的解决方法。

import 'package:flutter/material.dart'; 导入'package:hybrid/services/account_service.dart';

class AppHasRole extends StatelessWidget {
  final List<String> roles;
  final Widget child;

  final AccountService _accountService = AccountService();

  AppHasRole({
    Key? key,
    required this.roles,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _accountService.isAuthorized('Role', roles),
      builder: (BuildContext context, AsyncSnapshot<bool> snapshop) {
        if (snapshop.hasData) {
          final bool isAuthorized = snapshop.data!;
          return isAuthorized ? child : Container();
        }
        return Container();
      },
    );
  }
}

【讨论】：