Flutter-更改堆叠顺序 [英] Flutter - changing a Stack Order
本文介绍了Flutter-更改堆叠顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个堆栈，在某种情况下(例如，用户单击)，我希望将一个较低级别的窗口小部件推到堆栈的顶部.使用下面的代码作为简单示例-我需要在setState()方法中重新排序什么代码，以便第一个(底部)小部件成为最后一个(顶部)小部件?
I have a Stack where on a condition (e.g. user click), I want one of the lower order widgets to be pushed to the top of the stack. Using the code below as a simple example - what code do I need in a setState() method to reorder so that the first (bottom) widget becomes the last (top) widget?
new Stack(
children: <Widget>[
new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const
Color.fromRGBO(200, 100, 180, 1.0)),
new Positioned(
left: 20.0,
child: new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const
Color.fromRGBO(000, 10, 130, 1.0)),
),
new Positioned(
left:40.0,
child: new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
)
],
);
我已经编辑了建议的解决方案，并且堆栈不会更改顺序.这是完整的示例代码(按一下按钮，打印语句将按预期方式打印到控制台):
I have edited the proposed solution and the stack does not change order. Here is the sample code in full (the print statement print to the console as expected on button press):
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
AnimationController timerController;
void main() => runApp(MaterialApp(
home: MyApp(),
));
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
AnimationController timerController;
@override
Widget build(BuildContext context) {
List<Widget> stackChildren = <Widget>[
new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(50, 50, 50, 1.0)),
new Positioned(
left: 20.0,
child: new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(50, 100, 150, 1.0)),
),
];
void swapStackChildren() {
setState(() {
print("swapStackChildren");
stackChildren = [
new Positioned(
left: 40.0,
child: new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(150, 00, 200, 1.0))),
new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 100.0,
color: const Color.fromRGBO(200, 200, 100, 1.0)),
];
});
}
return Scaffold(
body: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Stack(children: stackChildren),
new RaisedButton(
child: const Text('Swop'),
color: Theme.of(context).accentColor,
elevation: 4.0,
splashColor: Colors.blueGrey,
onPressed: () {
swapStackChildren();
},
),
],
),
),
);
}
}
推荐答案
在小部件中创建一个变量来跟踪子级:
Make a variable in your widget that keeps track of the children:
List<Widget> stackChildren = <Widget>[
new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const
Color.fromRGBO(200, 100, 180, 1.0)),
new Positioned(
left: 20.0,
child: new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const
Color.fromRGBO(000, 10, 130, 1.0)),
),
new Positioned(
left:40.0,
child: new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
)
];
然后在您需要触发顺序切换的任何函数中，您都可以调用以下函数:
Then in whatever function you have to trigger the order switch, you can just call the following function:
void swapStackChildren() {
final temp = stackChildren[0];
setState(() {
stackChildren[0] = stackChildren[2];
stackChildren[2] = temp;
});
}
如评论所建议，最好为stackChildren分配一个新值，而不是对其进行修改.因此，您应该改为执行以下操作:
As suggested by the comments, it's a better idea just to assign a new value to stackChildren instead of modifying it. So you should instead do something like this:
void swapStackChildren() {
setState(() {
stackChildren = [
new Positioned(
left: 40.0,
child: new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(218, 165, 32, 1.0))),
new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(200, 100, 180, 1.0)),
new Positioned(
left: 20.0,
child: new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(000, 10, 130, 1.0)),
),
];
});
}
Here is with the full sample code:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
AnimationController timerController;
void main() => runApp(MaterialApp(
home: MyApp(),
));
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
AnimationController timerController;
List<Widget> stackChildren = <Widget>[
new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(50, 50, 50, 1.0)),
new Positioned(
left: 20.0,
child: new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(50, 100, 150, 1.0)),
),
];
void swapStackChildren() {
setState(() {
print("swapStackChildren");
stackChildren = [
new Positioned(
left: 40.0,
child: new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 60.0,
color: const Color.fromRGBO(150, 00, 200, 1.0))),
new Icon(Icons.monetization_on,
key: GlobalKey(),
size: 100.0,
color: const Color.fromRGBO(200, 200, 100, 1.0)),
];
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Stack(children: stackChildren),
new RaisedButton(
child: const Text('Swop'),
color: Theme.of(context).accentColor,
elevation: 4.0,
splashColor: Colors.blueGrey,
onPressed: () {
swapStackChildren();
},
),
],
),
),
);
}
}
这篇关于Flutter-更改堆叠顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
