【发布时间】：2021-03-07 04:46:00
【问题描述】：
我正在尝试开发一个仪表板页面，其中一行有 4 个网格视图，另一行有 2 个网格视图（下图）。我正在尝试使页面可滚动并使其看起来如下图所示：
我已经用下面的代码开发了flutter的布局：
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Reporting extends StatefulWidget {
@override
_Reporting createState() => _Reporting();
}
class _Reporting extends State<Reporting> {
SfCartesianChart _getAnimationLineChart() {
return SfCartesianChart(
plotAreaBorderWidth: 0,
primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)),
primaryYAxis: NumericAxis(
majorTickLines: MajorTickLines(color: Colors.transparent),
axisLine: AxisLine(width: 0),
minimum: 0,
maximum: 100),
);
}
@override
Widget build(BuildContext context) {
;
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.grey.shade100,
),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CustomAppBar(),
Expanded(
child: Column(
children: <Widget>[
ListView(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
GridView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 6 / 3.5,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 4
: MediaQuery.of(context).size.width >= 700
? 2
: 1),
children: [
Card(
margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Number Of Bugs",
style: TextStyle(
color: Colors.black, fontSize: 30.0),
),
Text(
"Critical, High, Info",
style: TextStyle(
color: Colors.green[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
],
),
GridView(
shrinkWrap: true,
padding: EdgeInsets.only(
//top: 20.0,
left: 90.0,
right: 100.0),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 3 / 2,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 2
: MediaQuery.of(context).size.width >=
700
? 2
: 1),
children: <Widget>[
Card(
//margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//mychart2Items("Conversion","0.9M","+19% of target"),
_getAnimationLineChart(),
],
),
),
Card(
//margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
])
],
),
],
),
),
],
),
),
),
);
}
}
我收到一个错误，它正在溢出。我试图使其可滚动的东西是使用 SingleChildScrollView，添加了收缩包装，添加了 scrollAxisDirection。但似乎没有任何效果。有人可以指导我如何解决这个问题。
A RenderFlex overflowed by 408 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/akramkhan/Documents/cshweb/cshwebapp/lib/pages/Reporting.dart:43:24
════════════════════════════════════════════════════════════════════════════════════════════════════
【问题讨论】：
标签： flutter flutter-layout flutter-dependencies flutter-web