flutter_widget_from_html
flutter_widget_from_html copied to clipboard
daohoangson
能否增加对有状态的widget的支持
Use case
目前只能支持渲染静态的内容，不能渲染表单元素并更新状态吗？
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mengli/widgets/top_bar.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
// import 'package:flutter_html/flutter_html.dart';
class CreatePage extends StatefulWidget {
const CreatePage({super.key});
@override
State<CreatePage> createState() => _CreatePage();
}
class _CreatePage extends State<CreatePage> {
bool light = false;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: const TopBar(svgAsset: 'assets/close.svg'),
body: Stack(
children: [
MediaQuery.removePadding(
removeTop: true,
context: context,
child: _buildBody()
)
],
),
);
}
// 注意flutter_html貌似没有flex，但是其对有状态的额组件支持比较好
_buildBody() {
// const htmlData = r"""
// <div style="padding: 0 24px">
// <h3>活动标题</h3>
// <div>
// <div>
// <access-time></access-time>
// <span>一整天</span>
// </div>
// <switch class="switch"></switch>
// </div>
//
// </div>
// """;
return HtmlWidget(
"""
<div style="padding: 0 24px">
<h3>活动标题</h3>
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<span icon="access_time"></span>
<span style="margin-left: 10px">一整天</span>
</div>
<div type="switch"></div>
</div>
</div>
""",
customWidgetBuilder: (element) {
if (element.attributes['icon'] == 'access_time') {
// render a custom block widget that takes the full width
return const Icon(Icons.access_time);
}
if (element.attributes['type'] == 'switch') {
// render a custom block widget that takes the full width
return Switch(
value: light,
activeColor: Colors.red,
onChanged: (bool value) {
setState(() {
light = value;
});
},
);;
}
return null;
},
);
}
}
这个Switch点了没效果 This switch ordered no effect
