我正在嘗試創建Matrix4 Gesture Detector包裹在小部件中的可拖動和可調整大小的小部件（小部件）Stack。我可以按照我希望的方式拖動和調整小部件的大小，但問題是，當我以編程方式將另一個小部件添加到Stack子部件時，以前定位的所有可拖動小部件都將恢復并回傳中心以及新添加的可拖動小部件。
假設Stack最初有 2 個可拖動的小部件，我們也對它們進行了定位，
當我通過點擊Add按鈕以編程方式添加另一個小部件時，位置丟失并且每個可拖動小部件都像這樣顯示在中心，
如何解決此問題并防止小部件不恢復到中心？這是代碼。
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider.value(value: DummyProvider())
],
child: MaterialApp(
home: MyApp(),
),
)
);
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
DummyProvider dummyProvider =
Provider.of<DummyProvider>(context, listen: true);
return Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
height: Constants.deviceHeight! * .6,
color: Colors.red,
child: Stack(
children: List.generate(
dummyProvider.list.length,
(index) => Drag(
text: Text(dummyProvider.list[index].text,
style: TextStyle(fontSize: 40)),
)),
),
),
ElevatedButton(
onPressed: () {
dummyProvider.addToList(DraggableText(
id: DateTime.now().millisecondsSinceEpoch.toString(),
text: String.fromCharCodes(List.generate(
5, (index) => Random().nextInt(33) 89))));
},
child: Text("Add"),
)
],
),
),
);
}
}
DraggableText班級，
class DraggableText {
String id = '';
String text = '';
FontWeight fontWeight = FontWeight.normal;
FontStyle fontStyle = FontStyle.normal;
TextDecoration fontDecoration = TextDecoration.none;
Matrix4 position = Matrix4.identity();
DraggableText({required this.id, required this.text});
}
擁有所有可拖動小部件的提供者，
class DummyProvider extends ChangeNotifier {
List<DraggableText> list = [];
String currentText = '';
void addToList(DraggableText text) {
list.add(text);
notifyListeners();
}
}
使用 Matrix4 Gesture Detector Package 的可拖動文本小部件，
class Drag extends StatelessWidget {
final Text text;
const Drag({required this.text});
@override
Widget build(BuildContext context) {
final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());
return MatrixGestureDetector(
onMatrixUpdate: (m, tm, sm, rm) {
notifier.value = m;
print("$m $tm $sm $rm");
},
child: AnimatedBuilder(
animation: notifier,
builder: (ctx, child) {
return Transform(
transform: notifier.value,
child: Center(
child: Stack(
children: <Widget>[
Transform.scale(
scale: 1,
origin: Offset(0.0, 0.0),
child: GestureDetector(
child:
Container(color: Colors.blueAccent, child: text)),
),
],
),
),
);
},
),
);}}
uj5u.com熱心網友回復：
在無狀態下試試這個：
class Drag extends StatelessWidget {
final Text text;
const Drag({Key? key, required this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
或有狀態：
class Drag extends StatefulWidget {
final Text text;
Drag({
Key? key,
required this.text,
}) : super(key: key);
@override
State<StatefulWidget> createState() => DragState();
}
class DragState extends State<Drag> {
使用它：
Drag(
key: UniqueKey(),
text:
uj5u.com熱心網友回復：
生成器的問題，它正在重繪 串列，包括位置，它正在創建 newList 的每個 setState。我在模型類中添加了額外的屬性來處理它，并在測驗問題時在通知程式中添加了一些額外的方法，這可能在未來有所幫助。
void main() {
runApp(MultiProvider(
providers: [ChangeNotifierProvider.value(value: DummyProvider())],
child: const MaterialApp(
home: MyApp(),
),
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => SafeArea(
child: Column(
children: [
Container(
height: constraints.maxHeight * .6,
color: Colors.red,
child: Consumer<DummyProvider>(
builder: (context, value, child) => Stack(
children: value.list
.map(
(d) => Drag(
key: ValueKey(d.id),
notifier: d.notifier!,
callBack: (
Matrix4 matrix,
) {
// print("${matrix.row0.a} ${matrix.row1.a}");
print(matrix);
},
text: Text(
d.text,
style: TextStyle(fontSize: 40),
),
),
)
.toList(),
),
),
),
ElevatedButton(
onPressed: () {
final provider = context.read<DummyProvider>();
provider.addToList(
DraggableText(
id: DateTime.now().millisecondsSinceEpoch.toString(),
text: String.fromCharCodes(
List.generate(5, (index) => Random().nextInt(33) 89),
),
),
);
},
child: Text("Add"),
)
],
),
),
),
);
}
}
class Drag extends StatelessWidget {
final Text text;
final ValueNotifier<Matrix4> notifier;
final Function callBack;
const Drag({
Key? key,
required this.text,
required this.callBack,
required this.notifier,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return MatrixGestureDetector(
onMatrixUpdate: (m, tm, sm, rm) {
notifier.value = m;
// print("$m $tm $sm $rm");
callBack(notifier.value);
},
child: AnimatedBuilder(
animation: notifier,
builder: (ctx, child) {
print("${notifier.value.row0.a} ${notifier.value.row1.a}");
return Transform(
transform: notifier.value,
child: Center(
child: Stack(
children: <Widget>[
Transform.scale(
scale: 1,
origin: Offset(0.0, 0.0),
child: GestureDetector(
child: Container(
color: Colors.blueAccent,
child: text,
),
),
),
],
),
),
);
},
),
);
}
}
class DraggableText {
String id = '';
String text = '';
FontWeight fontWeight = FontWeight.normal;
FontStyle fontStyle = FontStyle.normal;
TextDecoration fontDecoration = TextDecoration.none;
Matrix4 position = Matrix4.identity();
ValueNotifier<Matrix4>? notifier;
DraggableText({
required this.id,
required this.text,
}) {
this.notifier = this.notifier ?? ValueNotifier(Matrix4.identity());
}
}
class DummyProvider extends ChangeNotifier {
List<DraggableText> list = [];
String currentText = '';
void addToList(DraggableText text) {
list.add(text);
notifyListeners();
}
void updatePosition(int index, Matrix4 position) {
list[index].position = position;
notifyListeners();
}
void updatePositionByItem(DraggableText text, Matrix4 position) {
list.firstWhere((element) => element == text).position = position;
notifyListeners();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/348659.html