如何解决卡中的甜甜圈图
我正在尝试为我的项目实现UI,并且在使用syncfusion圆图类型时陷入困境。我想在卡片小部件中创建一个圆形图表。但是我遇到了与边界有关的异常,我无法弄清楚。 这是我要创建的内容:
编辑:这是我的代码示例:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),side: BorderSide(color: Colors.blueGrey,width: 0.5),),child: Expanded(
child: Container(
height: MediaQuery.of(context).size.height * .65,width: MediaQuery.of(context).size.width * .80,child: Column(
//mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),child: Text(
"Genel Durum",style: TextStyle(
fontSize: 20,color: Colors.black,letterSpacing: 0.3,Divider(
color: Colors.grey,thickness: 0.3,endIndent: 10,indent: 10,_buildChart(),],Widget _buildChart() {
return Container(
child: SfCircularChart(series: <CircularSeries>[
DoughnutSeries<ChartData,String>(
dataSource: chartData,pointColorMapper: (ChartData data,_) => data.color,xValueMapper: (ChartData data,_) => data.name,yValueMapper: (ChartData data,_) => data.age,// Radius of doughnut
radius: '10%')
]),);
}
感谢您的全力帮助!
解决方法
扩展小部件必须是后代或父级
使应用程序崩溃或显示空白屏幕等
由于“扩展”不是窗口小部件的父项而导致崩溃
Container(
child: Expanded(
child: MyWidget(),),)
行
Row(
children: [
Expanded(
child: MyWidget(),Expanded(
child:Text("Text Widget"),],)
在列
Column(
children: [
Expanded(
child: MyWidget(),
结帐时会感到不安Expanded Widget
还可以在Blogs后面结帐。非常有帮助
Flutter Layouts Walkthrough: Row,Column,Stack,Expanded,Padding 这是一个很好的教程,由Andrea Bizzotto轻松解释
Github link for flutter tutorial
,尝试删除Expanded
并使用下面的代码
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),side: BorderSide(color: Colors.blueGrey,width: 0.5),child: Container(
height: MediaQuery.of(context).size.height * .65,width: MediaQuery.of(context).size.width * .80,child: Column(
//mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),child: Text(
"Genel Durum",style: TextStyle(
fontSize: 20,color: Colors.black,letterSpacing: 0.3,Divider(
color: Colors.grey,thickness: 0.3,endIndent: 10,indent: 10,_buildChart(),Widget _buildChart() {
return Container(
height: MediaQuery.of(context).size.height * .65,child: SfCircularChart(series: <CircularSeries>[
DoughnutSeries<ChartData,String>(
dataSource: chartData,pointColorMapper: (ChartData data,_) => data.color,xValueMapper: (ChartData data,_) => data.name,yValueMapper: (ChartData data,_) => data.age,// Radius of doughnut
radius: '10%')
]),);
}
,
Syncfusion的问候。要解决所报告的问题,您可以将 Expanded 小部件作为父级包装图表小部件,而将 Container 包装图表小部件并指定大小(高度和宽度)为相同。修改后的代码可以在下面找到,
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),child: Center(
child: Container(
height: MediaQuery.of(context).size.height * .65,child: Column(
//mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),child: Text(
"Genel Durum",style: TextStyle(
fontSize: 20,Divider(
color: Colors.grey,)
Widget _buildChart() {
//Here we have wrapped our chart with Expanded widget
return Expanded(
child: SfCircularChart(series: <CircularSeries>[
DoughnutSeries<ChartData,String>(
dataSource: [
ChartData(Colors.greenAccent,'hi',100),ChartData(Colors.blueAccent,'to',100)
],// Radius of doughnut
radius: '30%')
]),);
}
谢谢, 达拉尼。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。