使用Flutter中的条创建水平滚动

时间:2020-10-18 13:30:10

标签: flutter flutter-layout

我正在创建带有图形的应用程序,但是图形本身在水平方向上会被撕裂:

Report Page

这是ReportPage小部件的代码:

- job_name: monitoring/prometheus-operator-kube-state-metrics/0
  kubernetes_sd_configs:
  - role: service

但是,这样做会使颤动产生以下错误:

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:mobile/src/components/LineChartComponent/LineChartComponent.dart'; class ReportPage extends StatefulWidget { @override _ReportPageState createState() => _ReportPageState(); } class _ReportPageState extends State<ReportPage> { @override Widget build(BuildContext context) { return new Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( floating: false, expandedHeight: 175.0, backgroundColor: Colors.white, flexibleSpace: FlexibleSpaceBar( background: Image.asset( 'images/relatorio.png', height: 210, width: 210, ), ), ), SliverAppBar( pinned: true, floating: false, expandedHeight: 20.0, backgroundColor: Colors.blue, flexibleSpace: FlexibleSpaceBar( title: Text("Report"), ), ), SliverFixedExtentList( itemExtent: 150.0, delegate: SliverChildListDelegate( [ ClipRRect( child: Container( decoration: BoxDecoration( border: Border.all( color: Colors.white, width: 2, ), borderRadius: BorderRadius.circular(30), color: Colors.blue, ), child: FlatButton( child: Column( mainAxisSize: MainAxisSize.min, children: [ Icon( Icons.assignment, color: Colors.white, size: 70, ), Text( "Amount of water", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 25, ), ), ], ), onPressed: null, ), ), ), ], ), ), SliverList( delegate: SliverChildListDelegate( [ SizedBox( height: 15.0, ), ClipRRect( child: Container( child: Text( "Used water L/day: ", textAlign: TextAlign.center, style: TextStyle( color: Colors.blue, fontSize: 23, fontWeight: FontWeight.w500, ), ), ), ), Container( height: 300, child: ListView( scrollDirection: Axis.horizontal, children: [ Padding( padding: const EdgeInsets.only( left: 8.0, right: 8.0, bottom: 10.0, ), child: LineChartComponent(), ), ], ), ) ], ), ), ], ), ); } }

这也是LineChartComponent小部件的代码:

RenderCustomMultiChildLayoutBox object was given an infinite size during layout.

LineChartComponent中的Bloc类仅生成使图形显示的数据。

如何制作水平滚动?

PS:我已经尝试过this solution,但这给了我同样的错误。

0 个答案:

没有答案