Flutter 只需重建一个文本小部件。但仍然需要占用与重建整个屏幕相同的资源

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:4.0.5进行了测试,将textview拆分为其他类,并使用consumer为文本重建提供状态,但可能所有小部件都已重建。 我的代码:

导入“包装:颤振/材料.省道”;
导入“包: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(),
]