Webアドレス：Webデモ
参照：
- Flutter動的置換ウィジェット演習リンク
- FlutterはUIを動的に作成します（flutter_dynamic）ベストプラクティスリンク
- FlutterはTabBarViewリンクを動的に追加します
- ヘビー！フラッタービュー部分更新リンク
- Flutterはレイアウト内のコンポーネントリンクをどのように追加または削除しますか
- 「ピット」のフラッターダイナミックディスプレイコンポーネント、リンクを登る方法をお教えします
1.プロジェクトを作成します
flutter create example013_dynamicchange
2.ASが開きます
3.依存関係を追加し、リソースファイルに配置します
4.コードを書く
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
{
List<Widget> testWidgets = [];
@override
void initSate(){
super.initState();
testWidgets.add(SingleItem(addItem,removeItem));
}
addItem()
{
print("addItem()");
testWidgets.add(SingleItem(addItem,removeItem));
// testWidgets.add(getrateWidget(""));
setState(() {
});
}
removeItem(widget)
{
print("removeItem()");
testWidgets.remove(widget);
setState(() {
});
}
@override
Widget build(BuildContext context) {
if(testWidgets.length==0)
{
testWidgets.add(SingleItem(addItem, removeItem));
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:testWidgets,
),
),
);
}
}
class SingleItem extends StatefulWidget
{
Function addItem,removeItem;
SingleItem(this.addItem,this.removeItem);
@override
State<StatefulWidget> createState() => _SingleItemState();
}
class _SingleItemState extends State<SingleItem>
{
int _counter = 0;
@override
Widget build(BuildContext context) {
return Row(mainAxisAlignment: MainAxisAlignment.center,children: [
Text(_counter.toString()),
CupertinoButton(child: Text("+"), onPressed: (){
print("+++");
setState(() {
_counter++;
});
}),
CupertinoButton(child: Text("Add"), onPressed: (){
print("Add");
setState(() {
widget.addItem();
});
}),
CupertinoButton(child: Text("Remove"), onPressed: (){
print("remove");
setState(() {
widget.removeItem(widget);
});
}),
],);
}
}
6.デバッグと実行
最初にASでAndroidまたはiOSシミュレーターを開き、実行ボタンをクリックします。
または、コマンドラインで実行します。
flutter run
7.Webをパッケージ化します
flutter build web
ソースコード
https://gitee.com/ruik2080/example-flutter