Flutter 嵌套过深的解决方案

写代码容易，读代码难。功能是都实现了，但是对维护人员来说，简直就是灾难。 ##背景 Flutter 注重组合而非继承，要想搭建出 UI，需要组合不同功能的 Widget，如布局 Widget、响应 Widget、控件 Widget 等才能搭建出一个功能完善的UI界面，这便导致了嵌套地狱: 在顶级Widget的构造器中内嵌众多 Widget。 像下面这个例子，其实都不是最多层的，只要你卖力，可以超乎想象的))))))))))))))))))..... c } l a @ W } s o i s v d r ) e g e ; F r e t b ) r r t u o , o i r d c ] s d b n y h , t e u : i n n ) e i n l e e , d l e n d w w c ) G d w e r h , l ( w e C c c C i c ) a B S n o o h e l h , s u c S : n n i n d i f c ) s i a t s s l t : l i h , l f a B : F i B m a : n : t a o : l t [ o l p a a c e : t r d s S x c u R c g i 0 w 2 i : n : t t c ( o t e k e t . 0 2 o e y a o n t c d F y 5 C 0 0 n C w n l t n s e t r i ( , o . 0 : o e e e t t r ( o l n 0 . l C w : l e L p t t , 0 n o e e x B o F e a , e r n T T s t o g i r i w s t e h s ) x o l . n . e x e W C ( t b e B g r t m i { o ) e l r o r ( ( e d n ) r u ( x e ' . g s , ( r D y F o e t ( e . r f t r s c s o ( a i o h s c { i g r a t o n m a d e n t a t e d t s X i 2 ' e . : o 0 , x e n 0 t x 1 ( , ) p 0 . a . t n 0 e d , x ( t ) s T , i h g e m m a e Y . : h e 1 a 0 d . l 0 i ) n , e 2 ) , 在IDE上面看到是这样的。 ##方法一 使用变量、方法与自定义 Widget 缓解嵌套地狱 c } l @ W } a o i r ) 把 s v d e c ) ; 嵌 s . e g t h c , 套 . r e u i h 严 A c . r t r l i 重 h i n d l 的 x W i } d b : d x i l c e u n n : W x d r d h i e e i x 使 g e : i l w w c d 用 e t n l ) d o g { 方 t u e d , ( B C n e 法 r w : ) B ( ( s t 抽 c n n , u t 离 o E e i r 的 部 n n ( w ) l u 一 分 s e , d c 部 t w F c C t 分 W r ( h ) o D 提 i u D i , n ( 出 d c ( l t ) 一 g t d e 个 e D : x 新 t ( n t 的 ) e w c W { o i G n d ( t g e e x t t ) { ##方法二 在widget外面再包一层。请求自己的class，返回封装好的widget。使用时就是链式调用。 i c } m l p / a W W } F F F W } W } W } W } W } W } W } W } } W } W } } W } W } } W } W } } W } } W } W } W } } W } } W } W } W } W } W } } W } W } W } W } W } W } o w s i i u u u i i i i i i i i ) i i ) i i ) i i ) i ) i i i ) i ) i i i i i ) i i i i i i r i s d d t n n n / d v _ r / d v _ r / d _ r / d _ r / / d _ r / d _ r / d _ r / d K @ @ _ r / d _ r / d K @ o a t _ r / d _ r / d K a p C D f d d B m t _ r / d _ r / d K m m m m B _ r / d K m m _ r / d _ r / d _ r / d K @ _ r / d K @ p _ r / d _ r / d _ r / d _ r / d _ r / d K @ C @ _ r / d _ r / d _ ) r / d _ ) r / d _ ) r / d _ ) r d r t d g g h c c c a g a w e 增 g a w e 增 F g w e 位 g w e s 填 g w e 是 g w e 透 g w e 基 g e r r { w e 设 g w e 矩 g e r r l r { w e 居 g w e 布 g e l a o e o o o o a r { w e 设 g w e 设 g e i a i a { o w e 限 g e a a { w e 百 g w e 缩 g w e 旋 g e r { w e 装 g e r o { w e 圆 g w e 圆 g w e 矩 g w e 路 g w e a g e r u r { w e 页 g w e 点 g w ; e 添 g o w ; e 双 g o w ; e 长 g o w ; e g e g W e e i t t t d e { r i t 加 e r i t 加 r e i t 置 e { d d d d d d i t t 充 e i t 否 e i t 明 e i t 准 e y e e i t 置 e i t 阵 e y e i i a i t 中 e i t 局 e y i d l c r u u x r a i t 置 e i t 置 e y n x n x x i t 定 e y x x i t 分 e { i t 放 e i t 转 e y e i t 饰 e y e s i t 形 e { i t 角 e { @ C C i t 形 e { i t 径 e { i t n e y e r e i t 面 e i t 击 e i k c o o o t 加 e n i k c o o o t 击 e n i k c o o o t 按 e n i k c o o o t e t ' e i t t s i i i d t K d u p t d u a a t d u t K o o o o o o d u a 布 t d u 显 t d u 度 t d u 线 t q q d u 宽 t d u 转 t q g g n d u t d u 容 t g d o o e b b C g n d u 具 t d u 最 t W W H H C d u 最 t W H d u 比 t K d u 布 t d u 盒 t q d u 盒 t q i d u 剪 t K d u 矩 t K r u l d u 剪 t K d u 剪 t K d u i t q v q d u 简 t d u 事 t d e h n n n u 点 t T d e h n n n u t D d e h n n n u t L d e h n n n u t u p t d D . o o o D e p g r a D p g r l c D g r D e u u u u u u g k l t r b w h c r c 局 D g r 示 D g r D g k r 布 D k u u g n r 高 D g r 换 D k u i n s g k t o a t c r t D g n r 器 D k n i r r g l l o i s g k a p c d f w h c m t c r 体 D g r 大 D k i i e e o m g r 大 D k i e g r 布 D e g k a w h c r 局 D g r 子 D k u g r 子 D k u t g n r 裁 D e g r 形 D e e s i g k b c c c r 裁 D e g r 裁 D e g r m D k u e u g k r 单 D g r 件 D g y i T D L r 击 D a g y i T D L r D o g y i T D L r D o g y i T D L r r a 装 g _ e _ n n n p e y a e n d e a e n i t e e n e y b b b b b b e e e o i o i e h n k e e n 布 e e n 0 e e e n 局 e e i i e e n 比 e e n e e i n m f e e r r l r h n o e e e n e e m n a r e e n n f e e l a o e o i e o a r h n 尺 e e n 最 e e d d i i n i e n 宽 e e d i e n 局 e y e e l i e h n e e n e e i e n e e i i e e n e y e n 剪 e y q t p e e o l l h n e y e n e y e n a e e i i e e n 切 e e n e e : l a o o n 事 e p e : l a o o n e u e : l a o o n e n e : l a o o n b n c 饰 e w c w a c d t i c d t g i c t c l l l l l l t y f p g t d i i c t 局 c t c t y c y r r t w c t c y r , e o t y a i i a i d c t w c y e g c t o s , o t y i d l c r d i n r a i 寸 c t 小 c y t t g g s n t 高 c y t g t c t y i d i i c t 1 c y r t 细 c y r o t w c t 裁 c u o t y r i i i c t c t t c y r c r t y 换 c t c t d p u n 件 c F t d p u n c b t d p u n c g t d p u n u k 器 t i o i d o k d t n o d t n o o t o k e e e e e e : t : h t t g l t 相 o t o t 是 o : t o , e e t o t o , e n r : n g g n l t o o t o , n , o i u w h t r : g d o o e t g s g n l t o t 宽 o , h h h h t W t 布 o , h h t o k : g t g l t o t 次 o , e t 节 o , e n t o k t o k i m c : d p p l t t o k t t o k t e o , e u e : t 效 o t o k : : b g t o u k : : b g t o l k : : b g t o P k : : b g t i _ a D d r d o o o d r e i = h g r i = h n r = h r e = : t o h h d h 当 r = h t r = h 完 r = h r d d = B h r = h r d t m = s i n s d h : r = C h r t l o n i e r m = n i r r g h h t i s d h r = h 高 r t t r i = h 局 r t = h r e = n h h d h r = h 是 r d = h 往 r d = D h r e = h r e r C l = e p B d h o r e = h o r e = h d r d r d = h 果 r = h r = e l P h r n = e l P h r e = e l P h r r = e l P h l w g e g a g n n n i a y n i a a n i 当 a a i a y l t r b w h k t : m : t : i 于 a i r a i 全 a k i a a i a i a , H k f n m f : i a e i a , o n d d i a , k m n : a r : t r n f : i a i 布 a = = a d i a = i a y k m F t : i a i 9 a i 外 a = e i a y i a y e l i k r e e : i d a y i d a y i O a v k i a i a y _ o e r i a c y _ e r i a T y _ e r i a e y _ e r i d i e c e t e T D L n t , g n s l t g n s 前 l t n s t , e o i o i e n e l o : : s f t n s u t n s 透 t n e s t d T s s t n s t M i n e o : e o s c t n s t r D t g i n e e g t o : a : o s t n s 局 t = = i t n s t = n s t , n e e a F s t n s 0 t i n s 抛 t D c s t , n s t , d i p n e R r h s o t , n s o t , n s p t d e D n e s t n s t n , w n T e s t n , w o T e s t a n , w o T e s t s n , w o T e s ( d : o t i t a o o g i e ; l i e ; 布 O i e ; i f p g t d i e y e p r w _ ; r i e ; e i e ; 明 i e y ; i o e e ; i e ; i a t e y r n r _ ; e i t ; i , d e h h n e y n : c i u w i r _ ; i e ; i 0 d n h e ; i d e ; i e y n c a _ ; i e ; 度 i n e ; i e D o ; i e ; i p B e y a : a _ ; : i e ; : i e ; a i o u e y ; i e ; i e i T a s ; i = e i n a s ; i p e i n a s ; i s e i n a s ; ) g f r ; o p u n 属 o d = w o = w 局 f o w o t , h t t g w , f , i b i h w a o w 为 o w o w , o u x l o w o t T w , m o t m w n o e o e c , t t w , t o o n i h n m m w o w o . o 0 d t : w o o d w o a w , t t c w o w o t w d o c e r o C w o B p e w , d v w o @ w o @ w c o u = r w , o w o w d a p s o w d T p s o F w d T p s o F w d T p s e l a n = F b g 性 n o n 相 f n n , t o h h t g o d e i m n 不 n 1 n n b t i n n r e : r : H i t n r n c o , s : p l n d d e t a : i n n 0 u . o s n u o n l : o t i n n e n o c a n u n o e h i c i i 需 n r 需 n r i n b a n n g p : : n f g a : : n u g a : : n u g a : : { t u t ( u l P u E P E P 对 s A , m , t P , h t t i d e E 显 O O o l B n A i s T i i d e ( o r C a o : D t i s r d S , b 0 u m C b u L i F r o d F q R c r o t s C r r a C u l o d 要 e C 要 e C t l C t A o H G e u G e p n G e p n G e p ; t i W w n e r p b d a p d a 位 e a l p , } o t t h g g L e x 示 o f 完 o p p b e a e a s t x t r t g a t g r c k c r a c o a d r e h g : g t g s i c l , b c i o l l b i f g r a : r g f i r u o o d a r e c t l c d < v l s i r g 自 c q l 自 c q l y a e u i n p h e o e t ? o o o n e t F o c e t F o c e t F t o i i c T e a l g d a g d 置 t l i o ) s , o , h e a x p f f 全 p a a a s ( s p r 4 s a r i l T e e e o a t o n l d , d c , h i r e i z o e l o n n i e l m r n a l : e i t o a t r e t a d l o i l e R i i : p : e 定 l u i 定 l u i n r o i a e r n s , ? n n n c s , u o o n s , u o o n s , u o o e n d d ; a s d e e d d e d . i g s i m t t y p a f f s 不 a c c s b e k p e a n a n i e t n y n t i n t i i e o t c n a t z e n . e n W s m . e i a m c i w t t t t r a a c i t B i m p i r R o p p t 义 i i p 义 i i p 淡 i o v n m c r o C t D L T ; t n n n D = t n n n L = t n n n r g g p s d I i d I i c g n i { t , , ) o a n a s t 透 c i i e a l e e c n t = s n , g s ) t : t i o s a g n c r , o , n ) e d s i . s i t i i . t c e t g i h ) t e a t t t o o i o p C O p R e r R b e c ) c p r R c p r P 入 m p e a i o ( l u o o a u c D L o u c D L o u c D L / { e e F F i l n n A n n e n ( t i ; u n d l t a 明 i t t l s i y c t s r f s n t ; e a o n t i n g o a n s ; d B t n i t d r t n i e t n i n d e ; e d t e e i r n o x O l v R a c R o r l ; l R e e l P e a 淡 a a s d t t ( k i r o u n p r , o o u f r , o o n f r , o o m t t u u n e s g l s g n ( k i o t d e s a g t y y i e n : t R f a t o f m s r k i n , r n m , r t s f B o r f n r t a e f n d i t o m t i d B e r d o a n ( v i a R d t = e r , i i e d c i a d t 出 t c . u e y { e c e n b g ( e u n b u e u n g u e u n a ; n n g f e ( l e ( t { e o n 布 e d e g e y ( : n l e R a o n r r o e : ( e n , a e e a i t o o x a i f a h i d i f B o n e h g B o d T B n t d P k a p l e i > c d p p c t p t h e i l r d : K y k D T l P F D b g l n D b g P n D b g t w c c ( t t k ( t k e K y n e 局 d ( 为 e ( ( e i k a t r s u m r n { y e i r n t o r r x ( i n i i , n B n i o n = a n F h o x B u o e e o e l p ( c u C t e B p t C ( p h C ( d t i a O e : ( e a e r u e l P e c e l P r c e l P e i ; ; s e { s e r e : e d ( k 显 ( k { o ( n b e t i m f e ( m t t K , r n ( t i n a m ( k n i n n e o i n x a l t a t x ( o r x 编 d c s y ( e k t s c l ( r e e ( u k e ( u k O y n t p o y { t p T e n t e r T ; t e r e ; t e r r d = . y K . y R y d ( { e 示 { e K p { e a y i o ( o , , , r e ( t , o : i , { e e t i t m d x t i ( l A l , c F ( k x n ( 写 B o i : r e ( l i R h r s e r s e p , e i a p k K e F a s c e T e a e T e s e T e i g o : e a : i k ( K y K y e a , s , o ( { r a y w { s n n K y d y t s a B ( y t k l l y t a { e ( s k 放 o r t < y b i p a a t y t y a a o c a k e e c u p s t c a s p c a s s c a s a e 0 n y l g k e e : e : y c e ( k m n i , , f t e : B , y x o { , y e y i S o c K y { , e 在 x a i k R : o p . d v 否 o : 否 o : c r n i c e y y t n i t p s ( t p s ( t p s l t . l k l k h e y y y i l b { e , s k d o s y o , = W x , y S g i r t e : y 外 ( t o e e r p a i i 则 m 则 m i , , t i y , o c ? ? o o F F F o F F F o F F . ) 0 y e k ( e t y , k k k t i a K y f e t r , k x i ( : i n z , o y : 面 { i n y c k d e n u o 无 C k 无 C k t y t , k r , ? ? n r u u u r u u u r u u d , ( y e a y , k e k e e y n s e : o y h e k e ( n d k z m e r k o . , t e e r t s r 效 l e 效 l e y ( y t e ( ( n n n ( n n n ( n n a { l , y l , a e y e y y , e e y r , F g e y { e t e k e e d , k e k n b > y r , i , , 果 i y 果 i y ( , @ a y f c c c c c c c c r d e , l A l y , y , , T l k m a r y , w h y e d n B e y e , a d , R A p , p , { r g , o o u , , t , , t , , t o f p ) p l i , , a y i k e H d c o , : : y B t o y , y c e c a l p p c e : n n n i i ' u t a d ; a i g f o @ l p n e y i o t u w B , o . x , , k c l c d i e c e c u q o D L c o o ; b : d o d g n i l b f r w e e y , t u o n d i o m k x c ( f g o i l i a r l r l r u t n o o , n n l d u d n m n e o f e a , : , T b r d o d x a e m ( e f i q r r p i u s < i < i v i a T u n e l i b i m e t x o s q y a e l : D u t C x y a n i t u o a p p s } R p P p e r g a b g { f f e n l n e n : l t u s b @ s s e e b h o W , x t t : a u t e p , ) e p a p : e , p l P K u u t f g e g n t f a i I a r p t w c l : n i W e r n i r e c e t e d , e r e n n o t : : t : l f o g r n s e e s w i o e s d c i r = f t d o , r { t r h r c c T e y c c p , a G e l f e e c e q c , i d r w t t o d , i e , n : > : > : u O h o a s , , p l p e a x e f : d l l u t d t a w i r h n t B t r : C r b i n p s k = t a l a o l x s u i i R t h t i d a , s h d o , T l c c c c c v j l D F F e { { o d d m i = , t o d d n r a h F i d t i t : o x u d i l l l l l e e d o u u y K K 0 p d = d e g a f o e e e t F a o t h n m r u F a r e p i i i i i , c : u n n } e e . : i i t n 1 c g f u S , d i a c n h , t i a m b i l n c p p p p p t b c c ) y y 0 n 0 n r m } h e s b e o c t , , s n i a l t i s o c p p p p p d _ l , , , t g . g y e ) i t l m b d : t o h ( H n x e . g : r l e e e e e u t w e { k k o , 0 , n l = a e a a o o r d e e t W c n a i r r r r r r a i T e e d p } a t { d g n s u a r , o i i s i w o m q t p , , , , , a g d a y y o , c ) c l , : t e o t e b s , u g g : d i n e u i B t } g p } } u h h i r , p i l l p h b h h t d t n a o e c C c C c i ) e , ) ) b r i { i g c _ u a c i e e d e l t t c h t a t r n h l l l l l o t l i l l n h w e c c s n c o i e : : o , h i : t , a i i i i i n { ) o { { e g d d m i i } h i : e a t u g n F n e v p p p p p : ; n h : : e l d ) i t T s R b h h h m s m a , a r p i B B B L r t n d g l y a y p a l t e e i t a c l T o o e c e c e d o i : _ _ t : e { d , l p e t e F i i n r x t a i u s r h l h l h u n g w w t : w e c i a g g H a H o l g r i a i a i a r g h r i i = _ ) a a : t o h c h h e i e r i n n t = v p v p v a P t i d d w ; _ l y R , e t t t i n i , g m s i i B i B i t r g g g A i w w s b a i o } , g t g n e , o C o e o e o i e = h e e l d i a I a t c g r ) h s h d m n n l r h r h r o s t t t i g d y n s i h h : c t , t o e t c : i : a : a : n s 0 , ) ) g e g s c e o i t { h , : u n , h p v v , } . ; ; n t e I l l } l F h i c b t i p . c i c i c ) 0 b m ) t n u i ) d a e l m h m l c l o a l o l o l c , o e ; ) c d n : c i d a i a e = h d s n i r i r i h { t n ; l e e { t g : x l x i : i t p p p i d t t u S T _ o h H d H h A l t i B = B = B l o o . d e y w r t _ e : e e l d _ i A e e e d u m c e m p i } F w i i i i : w o l h C h C h : b : e S a e d ) a i g _ g g g i n i a l a l a l n e n , g c d h w h h n _ d , a v i v i v _ e b t m t e { t g t i t t m w g s i p i p i w o e a i c t o e : d , F e i e c } o . o . o i b t r n c h ) r t g a n d t h ) r h r a r d o t } t s i ; , ) m e c c t g ) i , a , n , g t o ) i , l ; a t h t . e ; l { r t e t m c d c x ) i o c t d c d c i c t o ) { s c : h H ; l r e ) : h E h A h ) m ; h i e d } n ; i d i l i ; = i _ l i : ) t _ l g l i l = l w d g e w d e d a d f d i : h _ { r i : } : s : 0 a : d t w } d ) } . l g _ ) i ) g _ _ ) _ 0 s _ e w ; d e w { w w } e w t i g { t i i { i ) } i ) d e ) d d d ) d ; g t ; g g g { g e ) e e e { e t ; t t t t ) ) ) ) ) ; ; ; ; ; ##方法三 用扩展函数来给系统widget添加一个child属性。 使用时也支持链式调用。 e } x t C } } e o ) n n K A E C D D d d B E M r ) s t e l d o e e o o o d a { e ; i a y i g l c c u u x g t t k a p c d f w h c m t c o i / g e o o o b b C e r / u e l a o e o i e o a r h n n 复 k n I r r r l l o I i 调 r y i d l c r d i n r a i e 制 e m n a a e e n n x 用 n : g d o o e t g s g n l W r C y e s c t t s s 4 C n i r r g h h t i s d i o , n e o i i w h t e o C k m n : a r : t r n f : d i n t t l o o i e r t t n o e e g t o : a : o g n t G s o n n d i a s r t n y n : c i u w i r t e t a e G r t g i G a a t , t o o n i h n m m h t o i o e , d f h h n e n i a : p l n d d e t a : i E C n m o e o , t t o s n i a o : D t i s r s x o e e m c r , s m f e n a d r e h g : g t , t n r t e o e e o r e l d , d c , h i r t 构 r t r g c t r 的 r i i e o t c n a o a 造 y r a r o r m 构 ( g n c r , o , n n i 函 y t o n y , 造 n g o a n s n 数 a i u s 函 m , r t s f W e 的 l p o n t m 数 e a i t o i r 所 i a n d r a ， n t o r r d ( 有 g d , D a r 并 t i n a m g { 参 n d e i g 将 , o : i , e 数 m i c n i 当 n n t （ e n o t n 前 , f t 除 n g r s , w o s { 了 t , a , i r , c , t d e h i g g i o e r l n t o d , 对 u 字 象 n 段 作 d ） 为 D c e h c i o l r d a 参 t 数 i o n ,