Flutter 只需重建一个文本小部件。但仍然需要占用与重建整个屏幕相同的资源
我刚刚使用provider:4.0.5进行了测试,将textview拆分为其他类,并使用consumer为文本重建提供状态,但可能所有小部件都已重建。 我的代码:Flutter 只需重建一个文本小部件。但仍然需要占用与重建整个屏幕相同的资源,flutter,flutter-layout,Flutter,Flutter Layout,我刚刚使用provider:4.0.5进行了测试,将textview拆分为其他类,并使用consumer为文本重建提供状态,但可能所有小部件都已重建。 我的代码: 导入“包装:颤振/材料.省道”; 导入“包:provider/provider.dart”; void main(){ runApp(MyApp()); } 使用ChangeNotifier类MyState{ int计数器=0; 无效增量(){ 计数器++; notifyListeners(); } } 类MyApp扩展了无状态小部件
导入“包装:颤振/材料.省道”;
导入“包:provider/provider.dart”;
void main(){
runApp(MyApp());
}
使用ChangeNotifier类MyState{
int计数器=0;
无效增量(){
计数器++;
notifyListeners();
}
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
视觉密度:视觉密度。自适应平台密度,
),
主页:ChangeNotifierProvider(
创建:()=>MyState(),
孩子:我的主页(标题:“颤振演示主页”),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建(构建上下文){
打印(“构建”);
返回脚手架(
appBar:appBar(
标题:文本(widget.title),
),
正文:中(
子:列(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
不透明(
不透明度:0.5,
子对象:不透明度(
不透明度:0.5,
子:容器(
装饰:框装饰(颜色:Colors.red,boxShadow:[
箱形阴影(
颜色:颜色,黄色,
偏移量:偏移量(-5,-5),
半径:25,
扩展半径:25)
]),
儿童:中心(
子:文本(
“你好,世界”,
风格:Theme.of(context).textTheme.headline4,
),
),
),
),
),
不透明(
不透明度:0.5,
子对象:不透明度(
不透明度:0.5,
子:容器(
装饰:框装饰(颜色:Colors.red,boxShadow:[
箱形阴影(
颜色:颜色,黄色,
偏移量:偏移量(-5,-5),
半径:25,
扩展半径:25)
]),
儿童:中心(
子:文本(
“你好,世界”,
风格:Theme.of(context).textTheme.headline4,
),
),
),
),
),
不透明(
不透明度:0.5,
子对象:不透明度(
不透明度:0.5,
子:容器(
装饰:框装饰(颜色:Colors.red,boxShadow:[
箱形阴影(
颜色:颜色,黄色,
偏移量:偏移量(-5,-5),
半径:25,
扩展半径:25)
]),
儿童:中心(
子:文本(
“你好,世界”,
风格:Theme.of(context).textTheme.headline4,
),
),
),
),
),
不透明(
不透明度:0.5,
子对象:不透明度(
不透明度:0.5,
子:容器(
装饰:框装饰(颜色:Colors.red,boxShadow:[
箱形阴影(
颜色:颜色,黄色,
偏移量:偏移量(-5,-5),
半径:25,
扩展半径:25)
]),
儿童:中心(
子:文本(
“你好,世界”,
风格:Theme.of(context).textTheme.headline4,
),
),
),
),
),
大小盒子(
身高:35,
),
MyText(),
升起的按钮(
onPressed:Provider.of(context,listen:false).incre,
//onTap:(){
//setState((){});
// },
子项:文本('click'),
)
],
),
),
);
}
}
类MyText扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
退货消费者(
建筑商:(uu,州,uuu){
打印('buildText2');
返回文本(
'您多次按下按钮:${state.counter}',
);
},
);
}
}
当我只更新和重建文本时,这是一个屏幕,但它非常昂贵。
这是我的颤振医生-v
[✓] 颤振(通道开发,v1.18.0-6.0.pre,在Mac OS X 10.15.4 19E287上,语言环境为en VN)
•颤振版本1.18.0-6.0.pre at/Users/tbm/dev/flatter_sdk/flatter
•框架版本84c84fb249(6天前),2020-04-20 21:35:01-0400
•发动机版本2bde4f0ae4
•Dart版本2.9.0(build 2.9.0-1.0.dev a12c36dd97)避免不必要的重建优化了CPU时间。您的问题是渲染时间,它不受您所做优化的影响 您的问题是UI太复杂,无法绘制 其中一个原因是:它非常昂贵,而且你用了很多 而不是做:
不透明度(
不透明度:.5
子对象:不透明度(
不透明度:.5
孩子:。。。
),
),
第一步是将两者合并为一个:
不透明度(
不透明度:.5*.5
孩子:。。。
),
然后,为了进一步优化,而不是:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyState with ChangeNotifier {
int counter = 0;
void incre() {
counter++;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ChangeNotifierProvider(
create: (_) => MyState(),
child: 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> {
@override
Widget build(BuildContext context) {
print('build');
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Opacity(
opacity: 0.5,
child: Opacity(
opacity: 0.5,
child: Container(
decoration: BoxDecoration(color: Colors.red, boxShadow: [
BoxShadow(
color: Colors.yellow,
offset: Offset(-5, -5),
blurRadius: 25,
spreadRadius: 25)
]),
child: Center(
child: Text(
'Hello World',
style: Theme.of(context).textTheme.headline4,
),
),
),
),
),
Opacity(
opacity: 0.5,
child: Opacity(
opacity: 0.5,
child: Container(
decoration: BoxDecoration(color: Colors.red, boxShadow: [
BoxShadow(
color: Colors.yellow,
offset: Offset(-5, -5),
blurRadius: 25,
spreadRadius: 25)
]),
child: Center(
child: Text(
'Hello World',
style: Theme.of(context).textTheme.headline4,
),
),
),
),
),
Opacity(
opacity: 0.5,
child: Opacity(
opacity: 0.5,
child: Container(
decoration: BoxDecoration(color: Colors.red, boxShadow: [
BoxShadow(
color: Colors.yellow,
offset: Offset(-5, -5),
blurRadius: 25,
spreadRadius: 25)
]),
child: Center(
child: Text(
'Hello World',
style: Theme.of(context).textTheme.headline4,
),
),
),
),
),
Opacity(
opacity: 0.5,
child: Opacity(
opacity: 0.5,
child: Container(
decoration: BoxDecoration(color: Colors.red, boxShadow: [
BoxShadow(
color: Colors.yellow,
offset: Offset(-5, -5),
blurRadius: 25,
spreadRadius: 25)
]),
child: Center(
child: Text(
'Hello World',
style: Theme.of(context).textTheme.headline4,
),
),
),
),
),
SizedBox(
height: 35,
),
MyText(),
RaisedButton(
onPressed: Provider.of<MyState>(context, listen: false).incre,
// onTap: () {
// setState(() {});
// },
child: Text('click'),
)
],
),
),
);
}
}
class MyText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<MyState>(
builder: (_, state, __) {
print('buildText2');
return Text(
'You have pushed the button this many times: ${state.counter}',
);
},
);
}
}
[
Opacity(
opacity: .5 * .5
child: A(),
),
Opacity(
opacity: .5 * .5
child: B(),
),
Something(),
]