时间戳

首页 > 解决方案 > 在颤动中将新元素添加到另一个屏幕的列表中

flutter - 在颤动中将新元素添加到另一个屏幕的列表中

问题描述

我有一个清单Page_2.dart：

final List<Trans> transactions = [
    Trans(false, 20),
  ];

它采用自定义类小部件，Trans采用 Boolean 和 double 并将它们显示在 a 中Row，并且我有按钮可以将新元素添加到transactions,

RaisedButton(
 onPressed: () {
  setState(
          () {
       transactions.add(
       Trans(true, -50));
       },
     );
   },
  child: const Text("Add Transaction"),
),

我想在里面有一个按钮page_3.dart，它做同样的事情就是添加一个新的添加一个新Trans的transactions

标签： flutterdart

解决方案

您需要做的就是将“添加交易”功能从“第 2 页”传递到“第 3 页”。您必须确保函数“添加事务”接受“Trans”作为参数，并且它还为第 2 页调用 setState。在第 3 页中，您必须将“Trans(true, -50)”作为参数传递给从“第 2 页”接收的“添加交易”功能。“添加交易”功能可以在“第 3 页”的 RaisedButton 的 onPressed 方法中运行。请看下面的代码：

import 'package:flutter/material.dart';
import 'dart:math' as math;

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

extension Ex on double {
  double toPrecision(int n) => double.parse(toStringAsFixed(n));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Demo App"),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  void _addTransaction(Trans transaction) {
    setState(() {
      transactions.add(transaction);
    });
  }

  final List<Trans> transactions = [
    const Trans(myBool: false, myDouble: 20),
    const Trans(myBool: true, myDouble: -50),
    const Trans(myBool: false, myDouble: 110),
    const Trans(myBool: false, myDouble: 35.5),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: MediaQuery.of(context).size.height * .7,
          child: Scrollbar(
            showTrackOnHover: true,
            child: ListView.builder(
              itemCount: transactions.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: transactions[index],
                );
              },
            ),
          ),
        ),
        RaisedButton(
          onPressed: () {
            final rnd = math.Random();
            _addTransaction(
              Trans(
                myBool: rnd.nextBool(),
                myDouble: rnd.nextDouble().toPrecision(2) + rnd.nextInt(100),
              ),
            );
          },
          child: const Text("Add Transaction"),
        ),
        RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => Page3(addTran: _addTransaction),
              ),
            );
          },
          child: const Text("Page 3"),
        ),
      ],
    );
  }
}

class Trans extends StatelessWidget {
  final myBool;
  final myDouble;

  const Trans({Key key, this.myBool, this.myDouble}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text("Transaction: ${myBool.toString()}  ${myDouble.toString()}")
      ],
    );
  }
}

class Page3 extends StatefulWidget {
  final Function addTran;
  const Page3({Key key, this.addTran}) : super(key: key);
  @override
  _Page3State createState() => _Page3State();
}

class _Page3State extends State<Page3> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page 3"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () => widget.addTran(
            const Trans(myBool: true, myDouble: 50),
          ),
          child: const Text("Add Transaction"),
        ),
      ),
    );
  }
}

注意：即使在我上面的示例代码中，小部件“第 3 页”在同一个文件中。您可以像往常一样通过导入 material.dart 为“第 3 页”创建一个单独的库。

推荐阅读