Flutter - 如何在多个地方重用一些代码
Posted
技术标签:
【中文标题】Flutter - 如何在多个地方重用一些代码【英文标题】：Flutter - How can I reuse some code at multiple places 【发布时间】：2021-01-28 11:15:27 【问题描述】：您好，我有一个应用程序，我将在其中制作一本书，这本书将带有图像，
我正在尝试重用代码，这意味着如何在一个方法中添加代码，而不是在不同的区域使用该方法，但只更改每个方法中的图像......以使代码更可重用？？？代码将保持不变，但每个代码块中的图像会改变......我不想一次又一次地复制和粘贴代码。
import 'dart:ui';
import 'package:adobe_xd/adobe_xd.dart';
import 'dart:io';
import 'package:Quran_highlighter/main.dart';
import 'package:flutter/rendering.dart';
import 'package:system_shortcuts/system_shortcuts.dart';
import 'package:Quran_highlighter/Widgets/NavDrawer.dart';
import 'package:flutter/material.dart';
import 'package:zoom_widget/zoom_widget.dart';
import 'package:flutter/gestures.dart';
import 'package:Quran_highlighter/Widgets/size_config.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class Aliflaammeem extends StatefulWidget
@override
_AliflaammeemState createState() => _AliflaammeemState();
class _AliflaammeemState extends State<Aliflaammeem>
@override
Widget build(BuildContext context)
var screenSizes = MediaQuery.of(context).size;
return Scaffold(
appBar: new AppBar(title: new Text("1 Alif-laam-meem آلم, Pg2")),
// return DefaultTextStyle(
// style: Theme.of(context).textTheme.bodyText2,
body: LayoutBuilder(builder:
(BuildContext context, BoxConstraints viewportConstraints)
return SingleChildScrollView(
child: Stack(children: <Widget>[
new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: 0.10,
// body: Center,
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child: new Container(
**child: new Image.asset(
"test/assets/Para 1 - Alif-laam-meem no color/quranpg2.png",**
fit: BoxFit.cover,
),
),
),
actions: <Widget>[
new IconSlideAction(
caption: 'English',
// color: Colors.lightBlue,
color: Colors.blueGrey,
icon: Icons.language,
foregroundColor: Colors.lightBlue,
// color: Colors.black,
// ),
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Changepg2topg3()),
);
),
new IconSlideAction(
caption: 'Forward',
// color: Colors.greenAccent,
// color: Colors.black87,
icon: Icons.arrow_back_ios,
foregroundColor: Colors.greenAccent,
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Changepg2topg3()),
);
),
// ),
],
secondaryActions: <Widget>[
new IconSlideAction(
caption: 'Back',
// color: Colors.red[200],
icon: Icons.arrow_forward_ios,
foregroundColor: Colors.red[200],
// color: Colors.black87,
// onTap: () => _showSnackBar('More'),
),
new IconSlideAction(
caption: 'Arabic',
// color: Colors.yellow[800],
icon: Icons.brightness_4,
foregroundColor: Colors.yellow[800],
color: Colors.blueGrey,
// onTap: () =>
),
],
),
]));
));
//I WANT THE TOP CODE TO BE THE GLOBAL CODE WHICH WILL REUSED AGAIN AND
AGAIN IN THE SAME CLASS - AND IF I CHANGE SOMETHING UP THERE, I WANT IT TO AUTOMATICALLY CHANGE THROUGHOUT ALL THE PAGES
AND BELOW WE HAVE THE SAME CODE WHICH I COPIED AND PASTED - AND JUST CHANGED THE IMAGE AND APPBAR TITLE.... I NEED TO SEE HOW I CAN ACHIEVE THIS WITHOUT COPY AND PASTING....
class Changepg2topg3 extends StatelessWidget
@override
Widget build(BuildContext context)
var screenSizes = MediaQuery.of(context).size;
return Scaffold(
appBar: new AppBar(title: new Text("1 Alif-laam-meem آلم, Pg3")),
// return DefaultTextStyle(
// style: Theme.of(context).textTheme.bodyText2,
body: LayoutBuilder(builder:
(BuildContext context, BoxConstraints viewportConstraints)
return SingleChildScrollView(
child: Stack(children: <Widget>[
new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: 0.10,
// body: Center,
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child: new Container(
// padding: EdgeInsets.zero,
**child: new Image.asset(
`"test/assets/Para 1 - Alif-laam-meem no color/quranpg3.png",*`*
// fit: BoxFit.fitidth,
fit: BoxFit.cover,
),
),
),
actions: <Widget>[
new IconSlideAction(
caption: 'English',
color: Colors.lightBlue,
icon: Icons.language,
// onTap: () =>
),
new IconSlideAction(
caption: 'Forward',
color: Colors.greenAccent,
icon: Icons.arrow_back_ios,
// onTap: () => _showSnackBar('Share'),
),
],
secondaryActions: <Widget>[
new IconSlideAction(
caption: 'Back',
color: Colors.red[200],
icon: Icons.arrow_forward_ios,
onTap: ()
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Aliflaammeem()),
);
),
// ),
new IconSlideAction(
caption: 'Arabic',
color: Colors.yellow[800],
icon: Icons.brightness_4,
// onTap: () =>
),
],
),
]));
// );
));
//
【问题讨论】：
你想学习状态管理：flutter.dev/docs/development/data-and-backend/state-mgmt/…。我建议从 Provider 开始，然后切换到 Bloc。我在这里解释了如何使用 Provider：***.com/questions/63444318/… 我正在尝试重用代码，这意味着如何在方法中添加代码，而不是在不同区域使用该方法，但只更改每个方法中的图像......以使代码更可重用 这不是“重用”代码的好方法。先看看状态管理，比较一下哪个方案更擅长代码复用。 所以我尝试阅读您的示例，但不确定这是否是我要寻找的...我想编写一次代码 - 作为全局变量并一次又一次地重用它，但只更改图像，将有 846 张图像，我想确保代码和所有按钮都将保持一致。你能告诉我一个与我的例子相关的例子吗？我已将上述内容更改为仅反映我想要重用的代码 我没有真正的例子，但我认为你必须使用 Provider 和 Bloc。只在小部件之间传递数据是不好的。 【参考方案1】：1.创建一个返回列表的类 2.制作一个New Widget函数并将列表传入该函数
【讨论】：
我对flutter非常陌生，请您详细说明以上是关于Flutter - 如何在多个地方重用一些代码的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Flutter 中创建和使用 SnackBar 进行重用（全局）
Flutter 从 Api 获取 Userinfo 并在任何地方使用。请帮我