From 16c06a2d48d4ca938e0bfe865e08c5b121d762d6 Mon Sep 17 00:00:00 2001 From: Yegor Vialov Date: Sat, 25 Apr 2020 14:15:19 +0000 Subject: [PATCH] Widget rendering improvements --- lib/cards/card.class.dart | 2 + lib/cards/card_widget.dart | 89 +++++++------ .../entity_button_card_body.widget.dart | 30 ++--- lib/cards/widgets/gauge_card_body.dart | 118 ++++++++---------- lib/main.dart | 1 + lib/view.class.dart | 7 +- lib/viewWidget.widget.dart | 5 + 7 files changed, 120 insertions(+), 132 deletions(-) diff --git a/lib/cards/card.class.dart b/lib/cards/card.class.dart index 15ca032..03ba884 100644 --- a/lib/cards/card.class.dart +++ b/lib/cards/card.class.dart @@ -19,6 +19,7 @@ class HACard { String unit; int min; int max; + int depth; Map severity; HACard({ @@ -37,6 +38,7 @@ class HACard { this.unit, this.min, this.max, + this.depth: 1, this.severity, @required this.type }) { diff --git a/lib/cards/card_widget.dart b/lib/cards/card_widget.dart index a154a57..eb173ca 100644 --- a/lib/cards/card_widget.dart +++ b/lib/cards/card_widget.dart @@ -87,12 +87,14 @@ class CardWidget extends StatelessWidget { child: childCard.build(context), ) ).toList(); - return Row( + return IntrinsicHeight( + child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.stretch, children: children, - ); + ), + ); } return Container(height: 0.0, width: 0.0,); } @@ -237,52 +239,48 @@ class CardWidget extends StatelessWidget { if (entitiesToShow.isEmpty && !card.showEmpty) { return Container(height: 0.0, width: 0.0,); } - List rows = []; - rows.add(CardHeader(name: card.name)); - - int columnsCount = entitiesToShow.length >= card.columnsCount ? card.columnsCount : entitiesToShow.length; - - rows.add( - Padding( - padding: EdgeInsets.only(bottom: Sizes.rowPadding, top: Sizes.rowPadding), - child: FractionallySizedBox( - widthFactor: 1, - child: LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - List buttons = []; - double buttonWidth = constraints.maxWidth / columnsCount; - entitiesToShow.forEach((EntityWrapper entity) { - buttons.add( - SizedBox( - width: buttonWidth, - child: EntityModel( - entityWrapper: entity, - child: GlanceCardEntityContainer( - showName: card.showName, - showState: card.showState, - ), - handleTap: true - ), - ) - ); - }); - return Wrap( - //spacing: 5.0, - //alignment: WrapAlignment.spaceEvenly, - runSpacing: Sizes.doubleRowPadding, - children: buttons, - ); - } - ), - ), + int length = entitiesToShow.length; + int columnsCount = length >= card.columnsCount ? card.columnsCount : entitiesToShow.length; + int rowsCount = (length / columnsCount).round(); + List rows = []; + for (int i = 0; i < rowsCount; i++) { + int start = i*columnsCount; + int end = start + math.min(columnsCount, length - start); + List rowChildren = []; + rowChildren.addAll(entitiesToShow.sublist( + start, end + ).map( + (EntityWrapper entity){ + return EntityModel( + entityWrapper: entity, + child: GlanceCardEntityContainer( + showName: card.showName, + showState: card.showState, + ), + handleTap: true + ); + } + ).toList() + ); + while (rowChildren.length < columnsCount) { + rowChildren.add( + Container() + ); + } + rows.add( + TableRow( + children: rowChildren ) - ); + ); + } return Card( - child: Column( - mainAxisSize: MainAxisSize.min, - children: rows + child: Padding( + padding: EdgeInsets.symmetric(vertical: Sizes.rowPadding), + child: Table( + children: rows ) + ) ); } @@ -303,6 +301,7 @@ class CardWidget extends StatelessWidget { child: EntityModel( entityWrapper: card.linkedEntityWrapper, child: EntityButtonCardBody( + depth: card.depth, showName: card.showName, ), handleTap: true diff --git a/lib/cards/widgets/entity_button_card_body.widget.dart b/lib/cards/widgets/entity_button_card_body.widget.dart index b62b0d0..202ae88 100644 --- a/lib/cards/widgets/entity_button_card_body.widget.dart +++ b/lib/cards/widgets/entity_button_card_body.widget.dart @@ -3,9 +3,10 @@ part of '../../main.dart'; class EntityButtonCardBody extends StatelessWidget { final bool showName; + final int depth; EntityButtonCardBody({ - Key key, this.showName: true, + Key key, this.showName: true, @required this.depth }) : super(key: key); @override @@ -17,27 +18,20 @@ class EntityButtonCardBody extends StatelessWidget { if (entityWrapper.entity.statelessType > StatelessEntityType.MISSED) { return Container(width: 0.0, height: 0.0,); } - + double widthBase = math.min(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height) / 6; return InkWell( onTap: () => entityWrapper.handleTap(), onLongPress: () => entityWrapper.handleHold(), onDoubleTap: () => entityWrapper.handleDoubleTap(), - child: FractionallySizedBox( - widthFactor: 1, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - return EntityIcon( - padding: EdgeInsets.fromLTRB(2.0, 6.0, 2.0, 2.0), - size: constraints.maxWidth / 2.5, - ); - } - ), - _buildName() - ], - ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + EntityIcon( + padding: EdgeInsets.fromLTRB(2.0, 6.0, 2.0, 2.0), + size: widthBase / (depth * 0.5), + ), + _buildName() + ], ), ); } diff --git a/lib/cards/widgets/gauge_card_body.dart b/lib/cards/widgets/gauge_card_body.dart index 29c8b75..2aa5a8f 100644 --- a/lib/cards/widgets/gauge_card_body.dart +++ b/lib/cards/widgets/gauge_card_body.dart @@ -94,75 +94,61 @@ class GaugeCardBody extends StatelessWidget { onDoubleTap: () => entityWrapper.handleDoubleTap(), child: AspectRatio( aspectRatio: 2, - child: LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - double fontSizeFactor; - if (constraints.maxWidth > 300.0) { - fontSizeFactor = 1.6; - } else if (constraints.maxWidth > 150.0) { - fontSizeFactor = 1; - } else if (constraints.maxWidth > 100.0) { - fontSizeFactor = 0.6; - } else { - fontSizeFactor = 0.4; - } - return SfRadialGauge( - axes: [ - RadialAxis( - maximum: max.toDouble(), - minimum: min.toDouble(), - showLabels: false, - useRangeColorForAxis: true, - showTicks: false, - canScaleToFit: true, - ranges: ranges, - axisLineStyle: AxisLineStyle( - thickness: 0.3, - thicknessUnit: GaugeSizeUnit.factor, - color: Colors.transparent - ), - annotations: [ - GaugeAnnotation( - angle: -90, - positionFactor: 1.3, - //verticalAlignment: GaugeAlignment.far, - widget: EntityName( - textStyle: Theme.of(context).textTheme.body1.copyWith( - fontSize: Theme.of(context).textTheme.body1.fontSize * fontSizeFactor - ), - ), + child: SfRadialGauge( + axes: [ + RadialAxis( + maximum: max.toDouble(), + minimum: min.toDouble(), + showLabels: false, + useRangeColorForAxis: true, + showTicks: false, + canScaleToFit: true, + ranges: ranges, + axisLineStyle: AxisLineStyle( + thickness: 0.3, + thicknessUnit: GaugeSizeUnit.factor, + color: Colors.transparent + ), + annotations: [ + GaugeAnnotation( + angle: -90, + positionFactor: 1.3, + //verticalAlignment: GaugeAlignment.far, + widget: EntityName( + textStyle: Theme.of(context).textTheme.body1.copyWith( + fontSize: Theme.of(context).textTheme.body1.fontSize ), - GaugeAnnotation( - angle: 180, - positionFactor: 0, - verticalAlignment: GaugeAlignment.center, - widget: SimpleEntityState( - expanded: false, - maxLines: 1, - textAlign: TextAlign.center, - textStyle: Theme.of(context).textTheme.title.copyWith( - fontSize: Theme.of(context).textTheme.title.fontSize * fontSizeFactor, - ), - ), - ) - ], - startAngle: 180, - endAngle: 0, - pointers: [ - RangePointer( - value: fixedValue, - sizeUnit: GaugeSizeUnit.factor, - width: 0.3, - color: currentColor, - enableAnimation: true, - animationType: AnimationType.bounceOut, - ) - ] + ), + ), + GaugeAnnotation( + angle: 180, + positionFactor: 0, + verticalAlignment: GaugeAlignment.center, + widget: SimpleEntityState( + expanded: false, + maxLines: 1, + textAlign: TextAlign.center, + textStyle: Theme.of(context).textTheme.title.copyWith( + fontSize: Theme.of(context).textTheme.title.fontSize, + ), + ), ) ], - ); - }, - ), + startAngle: 180, + endAngle: 0, + pointers: [ + RangePointer( + value: fixedValue, + sizeUnit: GaugeSizeUnit.factor, + width: 0.3, + color: currentColor, + enableAnimation: true, + animationType: AnimationType.bounceOut, + ) + ] + ) + ], + ) ), ); } diff --git a/lib/main.dart b/lib/main.dart index 4c25fbd..300034d 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,5 +1,6 @@ import 'dart:convert'; import 'dart:async'; +import 'dart:math' as math; import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/material.dart'; diff --git a/lib/view.class.dart b/lib/view.class.dart index 79dce45..092465b 100644 --- a/lib/view.class.dart +++ b/lib/view.class.dart @@ -33,10 +33,10 @@ class HAView { }); } - cards.addAll(_createLovelaceCards(rawData["cards"] ?? [])); + cards.addAll(_createLovelaceCards(rawData["cards"] ?? [], 1)); } - List _createLovelaceCards(List rawCards) { + List _createLovelaceCards(List rawCards, int depth) { List result = []; rawCards.forEach((rawCard){ try { @@ -58,10 +58,11 @@ class HAView { min: rawCardInfo['min'] ?? 0, max: rawCardInfo['max'] ?? 100, unit: rawCardInfo['unit'], + depth: depth, severity: rawCardInfo['severity'] ); if (rawCardInfo["cards"] != null) { - card.childCards = _createLovelaceCards(rawCardInfo["cards"]); + card.childCards = _createLovelaceCards(rawCardInfo["cards"], depth + 1); } var rawEntities = rawCard["entities"] ?? rawCardInfo["entities"]; rawEntities?.forEach((rawEntity) { diff --git a/lib/viewWidget.widget.dart b/lib/viewWidget.widget.dart index 61bb93d..2fc6fa3 100644 --- a/lib/viewWidget.widget.dart +++ b/lib/viewWidget.widget.dart @@ -26,6 +26,11 @@ class ViewWidget extends StatelessWidget { } else { cardsContainer = Container(); } + return ListView( + shrinkWrap: false, + padding: EdgeInsets.all(0), + children: this.view.cards.map((card) => card.build(context)).toList() + ); return ListView( shrinkWrap: true, padding: EdgeInsets.all(0),