如何解决如何将Gridview放在Column小部件中的Card小部件附近
我正在尝试为我的应用创建用户界面。我需要这样设计：
但是我最近的用户界面如下：
在第二张屏幕截图中，我向下滚动是因为我的gridview小部件（具有4个卡式小部件）没有更接近其他小部件。其他小部件是：标题栏小部件，具有图形和子图小部件的卡片小部件。我将标题栏和图形卡小部件放在堆栈中，以在上方显示它们。我将这两个组合的小部件与gridview小部件一起放在一列中。我用SingleChildScrollView小部件包装此列小部件，因为我希望页面可滚动。 所以我的问题是：如何像第一个图像中那样将我的gridview窗口小部件更靠近卡片窗口小部件？
这是我用于此UI的代码：
import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
import 'package:intl/intl.dart';
import 'baskana_rapor_icon_icons.dart';
// ignore: must_be_immutable
class MainPage extends StatelessWidget {
List<Widget> widgets = new List();
List<CircularSegmentEntry> dataList = _loadData();
int _totalCount;
Widget s1,s2,total;
final formatter = new NumberFormat("#,##");
@override
Widget build(BuildContext context) {
widgets.add(_buildBody(context));
return Scaffold(body: _buildBody(context));
}
Widget _buildBody(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context,BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,//mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,),_buildTitleBar(context),Positioned(bottom: 65,left: 35,child: _buildCard(context)),],_buildGridButtons(context),);
},);
}
Widget _buildGridButtons(BuildContext context) {
int itemWidth = 80;
int itemHeight = 40;
return SafeArea(
child: Column(
children: [
GridView.count(
crossAxisCount: 2,childAspectRatio: (itemWidth / itemHeight),shrinkWrap: true,primary: true,children: [
GestureDetector(
onTap: () {
Navigator.pushNamed(context,'/MahalleRapor');
},child: Card(
color: Colors.white,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(25),child: Stack(
alignment: Alignment.center,children: [
Column(
mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
Icon(
BaskanaRaporIcon.mahalle_raporu,color: Colors.redAccent,size: 30,Text(
'Mahalle Raporu',style: TextStyle(
color: Colors.black87,fontSize: 20,fontWeight: FontWeight.bold,SizedBox(
height: 5,)
],Positioned(
bottom: 0,right: 1,left: 1,child: Divider(
color: Colors.redAccent,endIndent: 45,indent: 50,thickness: 3,GestureDetector(
onTap: () {
Navigator.pushNamed(context,'/BirimRapor');
},children: [
Icon(
BaskanaRaporIcon.birim_raporu,color: Colors.green[300],Text(
'Birim Raporu',child: Divider(
color: Colors.green[300],'/GelirGider');
},children: [
Icon(
BaskanaRaporIcon.gelir_gider,color: Colors.yellow[700],Text(
'Gelir / Gider',child: Divider(
color: Colors.yellow[700],'/BaskanaMesaj');
},children: [
Icon(
BaskanaRaporIcon.baskana_msg,color: Colors.blueAccent,Text(
'Başkana Mesaj',child: Divider(
color: Colors.blueAccent,)
],);
}
// ignore: todo
//TODO: Better implementation of UI
final double buttonHeight = 50;
Widget _buildCard(BuildContext context) {
return Center(
child: Container(
height: 500 + buttonHeight,child: Stack(
alignment: Alignment.center,overflow: Overflow.visible,children: [
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(
crossAxisAlignment: CrossAxisAlignment.center,mainAxisSize: MainAxisSize.max,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(dataList),SizedBox(
height: 20,_buildSubGraph(),SizedBox(
height: 40,Positioned(
//top: -buttonHeight /2,bottom: 27,child: _buildDetailsButton(context),);
}
Widget _buildDetailsButton(BuildContext context) {
return ButtonTheme(
height: 50,minWidth: 100,child: RaisedButton(
onPressed: () {
Navigator.pushNamed(context,'/DetailPage');
},color: Colors.white,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),child: Text("Detayları Gör"),);
}
Row _buildSubGraph() {
String s1 = formatter.format((dataList[1].value / _totalCount) * 100);
String s0 = formatter.format((dataList[0].value / _totalCount) * 100);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
Column(
//İşlemde
children: [
Text(
dataList[1].rankKey,style: TextStyle(
fontSize: 18,color: Colors.black87,Container(
decoration: BoxDecoration(
color: dataList[1].color,borderRadius: BorderRadius.only(
topRight: Radius.circular(5),bottomRight: Radius.circular(5),bottomLeft: Radius.circular(5),height: 50,width: 150,child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Text(
'${dataList[1].value.toInt()}',style: TextStyle(
color: Colors.white,SizedBox(
width: 50,Flexible(
child: Text(
'%' + s1,style: TextStyle(
color: Colors.white,fontSize: 16,fontWeight: FontWeight.w300,Column(
//Sonuçlanan
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Text(
dataList[0].rankKey,Container(
height: 50,decoration: BoxDecoration(
color: dataList[0].color,children: [
Text(
'${dataList[0].value.toInt()}',Flexible(
child: Text(
'%' + s0,)
],);
}
//Map<String,double> dataMap,List<Color> colorList,BuildContext context
Widget _buildChart(List<CircularSegmentEntry> dataList) {
_totalCount = _findTotalCount(dataList);
s1 = _createText("TOPLAMDA",20,Colors.grey[600],false);
s1 = _createText("TALEP",false);
total = _createText('$_totalCount',24,Colors.black87,true);
return Container(
child: AnimatedCircularChart(
size: Size(500,250),initialChartData: <CircularStackEntry>[
CircularStackEntry(
<CircularSegmentEntry>[
dataList[0],dataList[1],chartType: CircularChartType.Radial,startAngle: -90,holeRadius: 25,holeLabel:
"TOPLAMDA \n\t\t\t\t\t\t\t $_totalCount \n\t\t\t TALEP",// $s1 \n\t\t\t\t\t\t\t $total \n\t\t\t $s2
),);
}
Widget _buildTitleBar(BuildContext context) {
return Align(
alignment: Alignment.topCenter,child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * .247,decoration: BoxDecoration(
color: Colors.blue,shape: BoxShape.rectangle,borderRadius: BorderRadius.vertical(
bottom: Radius.circular(25),child: Row(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
Icon(
Icons.assessment,Text(
"Genel Durum",style: TextStyle(
color: Colors.white,fontSize: 28,letterSpacing: 0.5,);
}
}
Widget _createText(String msg,double size,Color color,bool isBold) {
return Text(
msg,style: TextStyle(
color: color,fontSize: size,fontWeight: isBold ? FontWeight.bold : FontWeight.normal,);
}
int _findTotalCount(List<CircularSegmentEntry> dataList) {
int result = 0;
for (int i = 0; i < dataList.length; i++) {
result += (dataList[i].value).toInt();
}
return result;
}
List<CircularSegmentEntry> _loadData() {
List<CircularSegmentEntry> dataList = [];
CircularSegmentEntry chartData1 =
new CircularSegmentEntry(150,Colors.greenAccent,rankKey: 'Sonuçlanan');
CircularSegmentEntry chartData2 =
new CircularSegmentEntry(150,Colors.blue,rankKey: 'İşlemde');
dataList.add(chartData1);
dataList.add(chartData2);
return dataList;
}
其他问题：如果我可以做些更有效的设计，您能告诉我吗？谢谢！
解决方法
这可能是由于堆栈中的这段代码而发生的。此容器占用您的全屏尺寸。这就是为什么您的GridView项目在屏幕大小之后立即生成的原因。尝试删除此容器或减小其高度。
Container(
height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,),更新： 你可以试试看我没有尝试过，但也许会有所帮助
Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,child: _buildTitleBar(context),Align(
alignment: Alignment.topCenter,child: Container(
margin: EdgeInsets.only(top: 100),child: _buildCard(context),)
],)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。