flutter - 将自定义小部件动态添加到列表中 - Flutter
问题描述
我有一个简单的自定义小部件trans()
(事务的缩写),它只需要一个数字和一个布尔值并显示一行,我有一个列表:
List<trans> transactions=[
trans(false, 20),
trans(true, -50),
trans(false, 110),
trans(false, 35.5),
];
并使用 a 显示它ListView
:
ListView.builder(
itemCount: transactions.length,
itemBuilder: (context, index){
return(
transactions[index]
);
},
),
但是如何使用 a 将新小部件添加到列表中button
并动态更新屏幕?
解决方案
您可以尝试以下代码:
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()}")
],
);
}
}
推荐阅读
- spring - 如何在“TransactionTemplate”上设置“noRollbackFor”?
- google-sheets-formula - 谷歌表格查询组和最大问题
- c++ - 带模板的参数包
- arrays - 如何从整数数组中减去 1
- vue-router - 在页面重新加载:将所有路由重定向到“/”
- npm - 如何在 Gitlab CI Runner 中安装 Firebase 工具?
- google-sheets - 根据计算字段对查询结果进行排序/排序
- firebase - 如何将 ApiFuture 转换为 ZIO 任务?
- string - 有没有办法将无效字符串映射到张量流中指定的默认数字?
- node.js - 发出 POST 请求时出现 Nodejs 错误 [ERR_HTTP_HEADERS_SENT]