我目前在列表视图中有一个百分比计数器
我正在尝试使用一个变量来使中间的文本与实际的条几乎平行，因为我正计划让信息来自python，而python的数字很好，所以我该怎么做才能获取文本圆圈中间的是实际的变数
var number = 0.7;
class percent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: new AppBar(
title: new Text("Circular Percent Indicators"),
),
body: Center(
child: ListView(
children: <Widget>[
**new CircularPercentIndicator(
radius: 140.0,
lineWidth: 13.0,
animation: true,
percent: number,
**center: new Text(
(number),**
style:
new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
circularStrokeCap: CircularStrokeCap.round,
progressColor: Colors.purple,
),**
]),
这是我所有的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_rave/flutter_rave.dart';
import 'package:percent_indicator/percent_indicator.dart';
void main() => runApp(MyApp());
var number = 0.7;
class MyApp extends StatelessWidget {
final appTitle = 'assets/logo.png';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/ccs.png',
fit: BoxFit.contain,
height: 32,
),
],
),
),
body: Center(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage('https://www.mobilityhouse.com/media/gene-cms/c/s/css-combo-stecker-468px.png'),
),
title: Text('CCS'),
subtitle: Text('Example: Ford Fusion, Hyundai Ioniq, Volkswagen e-golf'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyHomePage()),
);
},
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage('https://thumbs.dreamstime.com/b/gb-t-chinese-standard-ev-charger-connector-outline-icon-electric-car-charging-plug-gb-t-china-outline-icon-124469668.jpg'),
),
title: Text('GB/T'),
subtitle: Text('Example:BYD, Chineese manufacurers'),
onTap: () {
return showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('GB/T'),
content: const Text('Sorry! We do not have any chargers with this charging port'),
actions: <Widget>[
],
);
},
);
},
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage('https://w1.pngwave.com/png/342/73/231/electricity-symbol-electric-vehicle-chademo-battery-charger-combined-charging-system-charging-station-bmw-i3-car-png-clip-art.png'),
),
title: Text('Chademo'),
subtitle: Text('Example: Nissan Leaf, Mitsubishi Mi-ev'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyHomgePage()),
);
},
),
],
),
),
);
}
}
class SecondRoute {
}
class MyHomgePage extends StatelessWidget {
final String title;
MyHomgePage({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(child: Text('Sorry! This Charging port is currently not supported')),
);
}
}
class percent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: new AppBar(
title: new Text("Circular Percent Indicators"),
),
body: Center(
child: ListView(
children: <Widget>[
new CircularPercentIndicator(
radius: 140.0,
lineWidth: 13.0,
animation: true,
percent: number,
**center: new Text(
(number),**
style:
new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
circularStrokeCap: CircularStrokeCap.round,
progressColor: Colors.purple,
),
]),
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(
child: ListView(
children: <Widget>[
new CircularPercentIndicator(
radius: 140.0,
lineWidth: 13.0,
animation: true,
percent: number,
**center: new Text(
print(number + "/150");
style:**
new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
footer: new Text(
"Sales this week",
style:
new TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
),
circularStrokeCap: CircularStrokeCap.round,
progressColor: Colors.purple,
),
]),
),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Charging Port'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FirstRoute()),
);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => percent()),
);
},
),
],
),
),
);
}
}
答案 0 :(得分：1)
您需要在操作号码的任何地方调用 setState ，以重绘UI。
示例：
-g