flutter2 provider的使用(一):context.read和context.watch

在flutter2中,原有的provide已经丢弃不用,provide也不再更新,逼得我们不得不使用provider来做状态管理的替代。
学习provider就开始了。

从哪里开始写起,runApp

在main中的runApp()里,写 MultiProvider
形如:

MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: const MyApp(),
    ),

指向到class Counter ()

形如

class Counter with ChangeNotifier, DiagnosticableTreeMixin {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

在哪里调用它?使用context.read

onPressed: () => context.read().increment(),
在事件中,采用context.read调用Counter类中的increment()函数,执行一下,就可以获得count值
形如


                
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现您的需求,可以使用以下代码: ``` import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Column( children: [ Container( margin: EdgeInsets.only(top: 50), child: Column( children: [ Image.asset('assets/logo.png', width: 80, height: 80), Text('My App', style: TextStyle(fontSize: 24)), ], ), ), Expanded( child: Row( children: [ Expanded( child: Container( margin: EdgeInsets.all(20), child: ElevatedButton( onPressed: () {}, child: Text('Button 1'), ), ), ), Expanded( child: Container( margin: EdgeInsets.all(20), child: ElevatedButton( onPressed: () {}, child: Text('Button 2'), ), ), ), ], ), ), Expanded( child: Row( children: [ Expanded( child: Container( margin: EdgeInsets.all(20), child: ElevatedButton( onPressed: () {}, child: Text('Button 3'), ), ), ), Expanded( child: Container( margin: EdgeInsets.all(20), child: ElevatedButton( onPressed: () {}, child: Text('Button 4'), ), ), ), ], ), ), ], ), ), ); } } ``` 上面的代码中,我们使用了`Column`和`Row`来布局界面,其中: - `Column`用于将界面分为两个部分:最上方的 logo 和名字,以及下方的四个方形按钮。 - `Row`用于将下方的四个方形按钮分为两行,每行两个按钮。每个按钮都使用`Expanded`来占据一定的空间,使得它们平分整个屏幕。 注意,我们没有使用`AppBar`,而是直接将界面的顶部留出了一定的空间来显示 logo 和名字。如果您需要在界面中添加标题栏,可以使用`AppBar`来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值