我正在编写此应用程序以学习Flutter / Dart的应用程序具有一个扁平按钮,可在设定范围内生成一个随机数;一个文本小部件,用于显示该数字;以及一个扁平按钮,当按下时会将文本小部件重置为0。
我正在尝试添加一个 float 操作按钮,当按下该按钮时,将在现有按钮和文本小部件下添加一组新按钮,这些按钮和文本小部件将能够在不更改前一个随机数的情况下生成新的独立随机数。我正在寻找一种方法,能够添加尽可能多的,我希望所有人都能独立生成随机数的方法。谢谢!
import 'package:flutter/material.dart';
import 'dart:math' show Random;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//title: 'Random Number Generator',
//theme: ThemeData(
//primarySwatch: Colors.blue,
//visualDensity: VisualDensity.adaptivePlatformDensity,
//),
home: MyHomePage(title: 'Random Number Increase'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
int min = 50;
int max = 250;
var rnd = Random();
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter = min + rnd.nextInt(max - min);
});
}
void _resetCounter() {
setState(() {
_counter = 0;
});
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
final double itemHeight = (size.height - kToolbarHeight - 550) / 2;
final double itemWidth = size.width / 2;
return MaterialApp(
home: Scaffold(
body: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.orange, Colors.orange],
),
),
child: GridView.count(
primary: true,
padding: const EdgeInsets.only(
top: 100,
),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 3,
childAspectRatio: (itemWidth / itemHeight),
children: <Widget>[
Container(
child: FlatButton(
child: Text('Random',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
color: Colors.green,
onPressed: _incrementCounter,
splashColor: Colors.white),
),
Container(
child: Text(
'$_counter',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
alignment: Alignment.center,
color: Colors.blue,
height: 10,
),
Container(
child: FlatButton(
child: Text('Reset',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
color: Colors.red,
onPressed: _resetCounter,
splashColor: Colors.yellow,
),
),
],
))));
}
}
最佳答案
@Andrew,让您的生活变得更艰难的事实是,您希望每行都有一个逻辑(网格中的3个元素),并为每个行保持各自的状态。
因此,具有单个组件的Grid并不是您想要的那样动态。
最简单的解决方案是将逻辑组件与其单独的计数器分开,将重置和随机按钮作为单独的小部件(RowCounter
)(基于Row
)进行分离,并添加ListView
而不是GridView
来动态呈现它们的列表。
另一个解决方案是您可能仅使用一个屏幕尺寸测试了该解决方案,但是itemHeight会根据您使用的设备尺寸变为负值(如果高度小于kToolbarHeight + 550
,那么我删除了尺寸供您自己修复(我已经评论了这些行)
import 'package:flutter/material.dart';
import 'dart:math' show Random;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//title: 'Random Number Generator',
//theme: ThemeData(
//primarySwatch: Colors.blue,
//visualDensity: VisualDensity.adaptivePlatformDensity,
//),
home: MyHomePage(title: 'Random Number Increase'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
int min = 50;
int max = 250;
var rnd = Random();
class _MyHomePageState extends State<MyHomePage> {
List<RowCounter> counterList = [RowCounter()];
@override
Widget build(BuildContext context) {
void _incrementCounter() {
setState(() {
counterList.add(RowCounter());
});
}
return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
),
body: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.orange, Colors.orange],
),
),
child: ListView(
shrinkWrap: true,
addAutomaticKeepAlives: true,
children: <Widget>[...counterList],
),
),
),
);
}
}
class RowCounter extends StatefulWidget {
@override
_RowCounterState createState() => _RowCounterState();
}
class _RowCounterState extends State<RowCounter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter = min + rnd.nextInt(max - min);
});
}
void _resetCounter() {
setState(() {
_counter = 0;
});
}
@override
Widget build(BuildContext context) {
// var size = MediaQuery.of(context).size;
// double itemHeight = (size.height - kToolbarHeight - 550) / 2;
// double itemWidth = size.width / 2;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
// height: itemHeight,
// width: itemWidth,
child: FlatButton(
child: Text('Random',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
color: Colors.green,
onPressed: _incrementCounter,
splashColor: Colors.white),
),
Container(
// height: itemHeight,
// width: itemWidth,
child: Text(
'$_counter',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
alignment: Alignment.center,
color: Colors.blue,
),
Container(
// height: itemHeight,
// width: itemWidth,
child: FlatButton(
child: Text('Reset',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
color: Colors.red,
onPressed: _resetCounter,
splashColor: Colors.yellow,
),
),
],
);
}
}
关于listview - 在GridView中独立地复制多个子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61923606/