Flutter 如何直接将bloc添加到视图小部件

Flutter 如何直接将bloc添加到视图小部件,flutter,dart,bloc,Flutter,Dart,Bloc,我有一个创建小部件的屏幕 如何向我的小部件添加一个bloc class UserView extends StatelessWidget { final AnimationController aController; final Animation animation; @override Widget build(BuildContext context) { // Add Scafold here? return AnimationBuild

我有一个创建小部件的屏幕

如何向我的小部件添加一个bloc

class UserView extends StatelessWidget {
   final AnimationController aController;
   final Animation animation;

   @override
   Widget build(BuildContext context) {
     // Add Scafold here?
      return AnimationBuilder(
         animation: aController;
         builder: (BuildContext context, Widget child) {
            ...
         },
      );
   }
}
集团

class UserBloc extends Bloc<UserEvent, UserState> {
    final UserRepo userRepo;
    UserBloc({@required this.userRepo}) : assert(userRepo != null);
}
主屏幕

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with TickerProviderStateMixin {
  AnimationController animationController;

  Widget tabBody = Container(
    color: AppTheme.background,
  );

  @override
  void initState() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 800), vsync: this);
    tabBody = DashboardScreen(animationController: animationController);
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AppTheme.background,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: FutureBuilder<bool>(
          future: getData(),
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
            if (!snapshot.hasData) {
              return const SizedBox();
            } else {
              return Stack(
                children: <Widget>[
                  tabBody
                ],
              );
            }
          },
        ),
      ),
    );
  }
}
类主屏幕扩展StatefulWidget{
@凌驾
_HomeScreenState createState()=>\u HomeScreenState();
}
类_homescrenstate扩展状态
使用TickerProviderStateMixin{
动画控制器;
控件选项卡体=容器(
颜色:AppTheme.background,
);
@凌驾
void initState(){
animationController=animationController(
持续时间:常量持续时间(毫秒:800),vsync:this;
tabBody=仪表板屏幕(animationController:animationController);
super.initState();
}
@凌驾
无效处置(){
animationController.dispose();
super.dispose();
}
@凌驾
小部件构建(构建上下文){
返回容器(
颜色:AppTheme.background,
孩子:脚手架(
背景颜色:颜色。透明,
正文:未来建设者(
future:getData(),
生成器:(BuildContext上下文,异步快照){
如果(!snapshot.hasData){
返回常量SizedBox();
}否则{
返回堆栈(
儿童:[
tabBody
],
);
}
},
),
),
);
}
}
仪表板

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({Key key, this.animationController}) : super(key: key);

  final AnimationController animationController;
  @override
  _DashboardScreenState createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen>
    with TickerProviderStateMixin {
  Animation<double> topBarAnimation;

  List<Widget> listViews = <Widget>[];
  final ScrollController scrollController = ScrollController();
  double topBarOpacity = 0.0;

  @override
  void initState() {
    listViews.add(
      UserView(
        animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: widget.animationController,
            curve:
                Interval((1 / count) * 1, 1.0, curve: Curves.fastOutSlowIn))),
        animationController: widget.animationController,
      ),
    );
    super.initState();
  }

}
class DashboardScreen扩展了StatefulWidget{
const仪表盘屏幕({Key,this.animationController}):超级(Key:Key);
最终AnimationController AnimationController;
@凌驾
_仪表板屏幕状态createState()=>U仪表板屏幕状态();
}
类_仪表板屏幕状态扩展状态
使用TickerProviderStateMixin{
动画topBarAnimation;
列表视图=[];
最终ScrollController ScrollController=ScrollController();
双顶部气压容量=0.0;
@凌驾
void initState(){
listViews.add(
用户视图(
动画:Tween(开始:0.0,结束:1.0)。动画(曲线动画)(
父项:widget.animationController,
曲线:
间隔((1/计数)*1,1.0,曲线:Curves.fastoutswowin)),
animationController:widget.animationController,
),
);
super.initState();
}
}

我假设整个应用程序必须可以使用
UserBloc
,如果不能,只需将下面提供程序的级别更改为刚好高于它应该覆盖的小部件:

在这里,您提供了要在
MaterialApp
widget之上的bloc,以便稍后在此widget的任何子代中使用它:(在应用程序文件内)

现在,如果您想使用bloc发出事件并监听
MaterialApp
的任何子部件中的状态,只需使用
BlocListener
BlocConsumer
BlocBuilder
包装该部件即可(请参见它们之间的区别):

我假设您希望在
主屏幕中执行此操作:

class _HomeScreenState extends State<HomeScreen>
    with TickerProviderStateMixin {
  AnimationController animationController;

  Widget tabBody = Container(
    color: AppTheme.background,
  );

  @override
  void initState() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 800), vsync: this);
    tabBody = DashboardScreen(animationController: animationController);
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AppTheme.background,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: FutureBuilder<bool>(
          future: getData(),
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
            if (!snapshot.hasData) {
              return const SizedBox();
            } else {
              return Stack(
                children: <Widget>[
                  //tabBody
                  //Don't save widgets as fields, just create them on the fly
                  BlocBuilder<UserBloc,UserState>(
                    builder: (ctx,state){
                      //return widget that depends on state and which should rebuild when state changes
                      return DashboardScreen(animationController: animationController);
                    },
                  )
                ],
              );
            }
          },
        ),
      ),
    );
  }
}
class\u homescrenstate扩展状态
使用TickerProviderStateMixin{
动画控制器;
控件选项卡体=容器(
颜色:AppTheme.background,
);
@凌驾
void initState(){
animationController=animationController(
持续时间:常量持续时间(毫秒:800),vsync:this;
tabBody=仪表板屏幕(animationController:animationController);
super.initState();
}
@凌驾
无效处置(){
animationController.dispose();
super.dispose();
}
@凌驾
小部件构建(构建上下文){
返回容器(
颜色:AppTheme.background,
孩子:脚手架(
背景颜色:颜色。透明,
正文:未来建设者(
future:getData(),
生成器:(BuildContext上下文,异步快照){
如果(!snapshot.hasData){
返回常量SizedBox();
}否则{
返回堆栈(
儿童:[
//tabBody
//不要将小部件保存为字段,只需动态创建它们
BlocBuilder(
建造商:(ctx,州){
//返回依赖于状态的小部件,当状态更改时应重新生成该小部件
返回仪表板屏幕(animationController:animationController);
},
)
],
);
}
},
),
),
);
}
}
就这样


查看上面的链接以获取更多文档。

用户视图是树中的顶部小部件吗?(即material应用程序的家)@LoVe不,不是。我有一个
主页
,然后是
仪表板
,然后是
用户视图
。我是否应该发布这些信息的片段来帮助您帮助我?是的,请告诉我这些信息上面是否提供了blocwidgets@LoVe我添加了所有我认为相关的代码。请帮忙!
 return BlocProvider(
    create: (_)=>UserBloc(userRepo:UserRep()),
    child: MaterialApp(
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: AppTheme.textTheme,
        platform: TargetPlatform.iOS,
      ),
      home: HomeScreen(),
    ),
  );
class _HomeScreenState extends State<HomeScreen>
    with TickerProviderStateMixin {
  AnimationController animationController;

  Widget tabBody = Container(
    color: AppTheme.background,
  );

  @override
  void initState() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 800), vsync: this);
    tabBody = DashboardScreen(animationController: animationController);
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AppTheme.background,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: FutureBuilder<bool>(
          future: getData(),
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
            if (!snapshot.hasData) {
              return const SizedBox();
            } else {
              return Stack(
                children: <Widget>[
                  //tabBody
                  //Don't save widgets as fields, just create them on the fly
                  BlocBuilder<UserBloc,UserState>(
                    builder: (ctx,state){
                      //return widget that depends on state and which should rebuild when state changes
                      return DashboardScreen(animationController: animationController);
                    },
                  )
                ],
              );
            }
          },
        ),
      ),
    );
  }
}