將自定義小部件動態添加到列表 - Flutter

Question

我有一個簡單的自定義小部件trans() （事務的縮寫），它只需要一個數字和一個 Boolean 並顯示一行，我有一個列表：

 List<trans> transactions=[
      trans(false, 20),
      trans(true, -50),
      trans(false, 110),
      trans(false, 35.5),

    ];

並使用ListView顯示它：

ListView.builder(
 itemCount: transactions.length,
  itemBuilder: (context, index){
  return(
  transactions[index]
  );
 },
),

但是如何使用button將新小部件添加到列表中並動態更新屏幕？

Answer 1

您可以嘗試以下代碼：

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

final Color darkBlue = 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> {
  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();
            setState(
              () {
                transactions.add(
                  Trans(
                    myBool: rnd.nextBool(),
                    myDouble:
                        rnd.nextDouble().toPrecision(2) + rnd.nextInt(100),
                  ),
                );
              },
            );
          },
          child: const Text("Add Transaction"),
        ),
      ],
    );
  }
}

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()}")
      ],
    );
  }
}

Answer 2

嘗試

 List<Widget> transactions=[
      trans(false, 20),
      trans(true, -50),
      trans(false, 110),
      trans(false, 35.5),
      Button(child:Text('This is button in the list')), 

    ];