- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为我的应用创建用户界面。我需要这样设计:
但是我最近的用户界面如下所示:
在第二个屏幕截图中,我向下滚动是因为我的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');
},
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.birim_raporu,
color: Colors.green[300],
size: 30,
),
Text(
'Birim 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.green[300],
endIndent: 45,
indent: 50,
thickness: 3,
),
),
],
),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, '/GelirGider');
},
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.gelir_gider,
color: Colors.yellow[700],
size: 30,
),
Text(
'Gelir / Gider',
style: TextStyle(
color: Colors.black87,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
)
],
),
Positioned(
bottom: 0,
right: 1,
left: 1,
child: Divider(
color: Colors.yellow[700],
endIndent: 45,
indent: 50,
thickness: 3,
),
),
],
),
),
),
GestureDetector(
onTap: () {
Navigator.pushNamed(context, '/BaskanaMesaj');
},
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.baskana_msg,
color: Colors.blueAccent,
size: 30,
),
Text(
'Başkana Mesaj',
style: TextStyle(
color: Colors.black87,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
)
],
),
Positioned(
bottom: 0,
right: 1,
left: 1,
child: Divider(
color: Colors.blueAccent,
endIndent: 45,
indent: 50,
thickness: 3,
),
),
],
),
),
),
],
)
],
),
);
}
// 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,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'${dataList[1].value.toInt()}',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
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,
style: TextStyle(
fontSize: 18,
color: Colors.black87,
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration(
color: dataList[0].color,
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'${dataList[0].value.toInt()}',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
SizedBox(
width: 50,
),
Flexible(
child: Text(
'%' + s0,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w300,
),
),
),
],
),
),
],
)
],
);
}
//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", 20, Colors.grey[600], 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,
color: Colors.white,
),
Text(
"Genel Durum",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
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),
),
)
],
)
关于flutter - 如何将Gridview放在Column小部件中的Card小部件附近,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63519493/
这正确地呈现了标题,因为我可以看到一个列带有“Product ID”标题的表:。我正试图重构它,这样我就可以重用它,因为它们在整个应用程序中几乎是相同的:。在这种情况下,头不会呈现...检查页面元素中
我什至不知道如何表达这一点,但在 Python 中有没有一种方法可以引用等号之前的文本,而无需实际再次编写? ** 编辑 - 我在 Jupyter 中使用 python3 我似乎用了半辈子的时间来写作
假设我有一个包含以下列的字典 dict_ = [ {'key1': 'value1', 'key2': 'value2', 'key3': 'value3', '
假设我有一个包含以下列的字典 dict_ = [ {'key1': 'value1', 'key2': 'value2', 'key3': 'value3', '
假设我的数据库中有一张地铁 map ,其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
代码 select c1,c2,c3,c4,c5,c6 from table where c5 in ('a', 'b') 从这里开始,我想将 c5 列拆分为两列,然后根据它们对 c
我正在尝试搜索表格中的两列,即标题和描述。但我想先搜索标题,然后再搜索描述。所以匹配标题的所有行排在第一位,所有匹配描述的行排在第二位 我可以使用单个 SQL 查询来实现吗? 最佳答案 您还可以使用
下面有以下 Python 数据框。 “标志”字段是我想要用代码创建的所需列。 我想要执行以下操作: 如果“分配类型”是预测的并且“Activities_Counter”大于 10,我想创建一个名为“F
我有两列,area 和 block,其中 area 是一个 int 类型,block 是一个 varchar。 现在我正在写两个查询: select * from table where area a
使用 Slick 2,我试图生成一个带有元组 IN 子句的查询: select * from my_table where (a, b) IN ((1, 87)); 给定: val seq: Seq[
我正在尝试从数据透视表中获取一组值,其中 A 列等于值数组,例如 ID 12 的 attribute_value_id 等于 3 和 9。这可以做到吗?我已经走了这么远... ID | post_id
我找不到这样做的有效方法。我在 Python 中有以下 DataFrame,列从 A 到 Z A B C ... Z 0 2.0 8.0 1.0 ... 5.0 1
我的数据框中有以下格式的数据: >>> df = pd.DataFrame(np.random.randn(6,4),index=dates,columns=list('ABCD')) >>> df
我有多个与我公司销售的产品相关的表被新产品取代,随着时间的推移,这导致了多个表的出现。 我一遍又一遍地使用以下查询,直到最终表中只剩下 2 个产品... CREATE TABLE mar15a
我有如下 2 个表:- 表A ------------------------------- | product_id | price | --------------------
我有一个名为 tbl_mainsheet7 的表,创建方式如下: pk_mainsheet client_id project_id mainsheet_id project_cat EA_
我得到了以下 HTML 结构: ... ... 我的 CSS: #main-container { width:80%; margin:20px auto;
对于我的以下要求,我无法获得解决方案。 如果 data.table(如下)在 Col1 和 Col3 中有匹配的值。替换 Col2 值(旧的 New-Val)。 Col1 Col2 Col3
我正在通过连接几个表来构建一个 View ,以通过 Entity Framework 提取数据。由于此 View 没有唯一列,EntityFramework 无法检索正确的结果集(即第一列重复)。 为
好的,我已经尝试了太久了,是时候寻求帮助了。我有一个看起来有点像这样的数据框: person fruit quantity all_fruits 0 p1 grapes 2
我是一名优秀的程序员,十分优秀!