flutter 在两个页面之间传递数据而不导航到数据

x6h2sr28  于 2022-12-27  发布在  Flutter
关注(0)|答案(1)|浏览(156)

我正在尝试将数据传递到一个新的flutter页面,只是我不想在点击蓝色按钮时导航到发送信息的视图,我正在使用下面的代码,但是在网络上,有一个类似android的转换是很奇怪的。

Navigator.push(
   context, 
   MaterialPageRoute(
   builder: (context) => ViewUserOutput(loadData: true)
   )
);

我想将数据直接发送到黄色部分,而不让它全屏显示,如下所示:

谢啦,谢啦

dw1jzc5e

dw1jzc5e1#

最佳做法是使用provider软件包,该软件包位于:https://pub.dev/。下面是一个使用provider包的简单计数器应用的示例:

主省道:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'views/home_screen.dart';
import 'provider/counter_provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => Counter(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(),
      ),
    );
  }
}

主屏幕.dart:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../provider/counter_provider.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[100],
      appBar: AppBar(
        title: const Text('Provider'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Count(),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              context.read<Counter>().decrement();
            },
            tooltip: 'Decrement',
            child: const Icon(Icons.remove),
          ),
          const SizedBox(width: 10.0),
          FloatingActionButton(
            onPressed: () {
              context.read<Counter>().restart();
            },
            tooltip: 'Restart',
            child: const Icon(Icons.restart_alt),
          ),
          const SizedBox(width: 10.0),
          FloatingActionButton(
            onPressed: () {
              context.read<Counter>().increment();
            },
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

/// As we have [context.watch] inside of our widget,
/// it will rebuild the entire widget.
/// Therefore we can create a standalone widget like the one below.
class Count extends StatelessWidget {
  const Count({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      '${context.watch<Counter>().count}',
      style: const TextStyle(fontSize: 40),
    );
  }
}

计数器提供程序.dart

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

  void restart() {
    _count = 0;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

相关问题