如何让条形图在颤动中从下往上开始?
How to make the bar chart starts from the bottom to top in flutter?
我想让条形图从下到上开始颤动,因为我的条形图是从上到下开始的,这给用户带来了不好的影响。那么,怎样才能让条形图在flutter中从下往上开始呢?
下面是条形图的两个小部件,我只是将它们分散到两个不同的文件中。
print('build() ChartBar');
return LayoutBuilder(builder: (ctx, constraints) {
return
Column(
children: <Widget>[
Container(
height: constraints.maxHeight * 0.15,
child: FittedBox(
child: Text('$${spendingAmount.toStringAsFixed(0)}'),
),
),
SizedBox(
height: constraints.maxHeight * 0.05,
),
Container(
height: constraints.maxHeight * 0.6,
width: 10,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 1.0),
color: Color.fromRGBO(220, 220, 220, 1),
borderRadius: BorderRadius.circular(10),
),
),
FractionallySizedBox(
heightFactor: spendingPercentageOfTotal,
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(10),
),
)),
],
),
),
SizedBox(
height: constraints.maxHeight * 0.05,
),
Container(
height: constraints.maxHeight * 0.15,
child: FittedBox(
child: Text(label),
),
)
],
);
});
}
}
Widget build(BuildContext context) {
print('build() Chart');
return Card(
elevation: 6,
margin: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: groupedTransactionValues.map(
(data) {
return Flexible(
fit: FlexFit.tight,
child: ChartBar(
data['day'],
data['amount'],
totaLSpending == 0.0
? 0.0
: (data['amount'] as double) / totaLSpending));
},
).toList(),
),
),
);
}
}
最简单的方法是使用依赖项
您可以使用下面的代码。 Flutter 默认是从上到下。您可以使用对齐小部件更改此设置。
Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(....),
)
将其添加到 Stack 小部件中
alignment: AlignmentDirectional.bottomStart,
我想让条形图从下到上开始颤动,因为我的条形图是从上到下开始的,这给用户带来了不好的影响。那么,怎样才能让条形图在flutter中从下往上开始呢?
下面是条形图的两个小部件,我只是将它们分散到两个不同的文件中。
print('build() ChartBar');
return LayoutBuilder(builder: (ctx, constraints) {
return
Column(
children: <Widget>[
Container(
height: constraints.maxHeight * 0.15,
child: FittedBox(
child: Text('$${spendingAmount.toStringAsFixed(0)}'),
),
),
SizedBox(
height: constraints.maxHeight * 0.05,
),
Container(
height: constraints.maxHeight * 0.6,
width: 10,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 1.0),
color: Color.fromRGBO(220, 220, 220, 1),
borderRadius: BorderRadius.circular(10),
),
),
FractionallySizedBox(
heightFactor: spendingPercentageOfTotal,
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(10),
),
)),
],
),
),
SizedBox(
height: constraints.maxHeight * 0.05,
),
Container(
height: constraints.maxHeight * 0.15,
child: FittedBox(
child: Text(label),
),
)
],
);
});
}
}
Widget build(BuildContext context) {
print('build() Chart');
return Card(
elevation: 6,
margin: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: groupedTransactionValues.map(
(data) {
return Flexible(
fit: FlexFit.tight,
child: ChartBar(
data['day'],
data['amount'],
totaLSpending == 0.0
? 0.0
: (data['amount'] as double) / totaLSpending));
},
).toList(),
),
),
);
}
}
最简单的方法是使用依赖项
您可以使用下面的代码。 Flutter 默认是从上到下。您可以使用对齐小部件更改此设置。
Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(....),
)
将其添加到 Stack 小部件中
alignment: AlignmentDirectional.bottomStart,