所以我目前正在創建這個基本上類似于
您可以同時更改標題和標題。但是,當您將視窗拖動到新位置時,標題和說明會重置。
為了創建視窗,我創建了不同的小部件,它們都擴展了 Window 類。Window 類如下所示:
class Window extends StatefulWidget {
SystemMouseCursor cursor = SystemMouseCursors.grab;
String title = "";
final Widget child;
double x = Random().nextDouble() * 500;
double y = Random().nextDouble() * 500;
TextEditingController controller = TextEditingController();
Window({
Key? key,
required this.title,
required this.child,
}) : super(key: UniqueKey());
@override
State<Window> createState() => _WindowState();
}
class _WindowState extends State<Window> {
bool started = false;
@override
Widget build(BuildContext context) {
if (!started) {
setState(() {
widget.controller.text = widget.title;
});
}
return Positioned(
left: widget.x,
top: widget.y,
child: GestureDetector(
child: Draggable<Widget>(
child: Container(
width: 406.0,
height: 406.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: const Color.fromARGB(255, 249, 249, 249),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 12.0,
spreadRadius: 6.0,
offset: const Offset(4.0, 4.0),
),
BoxShadow(
color: Colors.white70.withOpacity(0.05),
blurRadius: 12.0,
spreadRadius: 6.0,
offset: const Offset(-4, -4),
)
]),
child: Stack(
children: [
const Positioned(
right: 0,
bottom: 0,
child: MouseRegion(
cursor: SystemMouseCursors.resizeDownRight,
child: SizedBox(
height: 15,
width: 15,
),
),
),
Positioned(
top: 84,
left: 24,
right: 24,
bottom: 24,
child: Container(
child: widget.child,
),
),
Positioned(
top: 0,
right: 0,
left: 0,
child: Container(
width: 406.0,
height: 60.0,
decoration: BoxDecoration(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(15.0),
),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
offset: const Offset(0, 6.0),
blurRadius: 12.0,
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Align(
alignment: Alignment.centerLeft,
child: SizedBox(
width: 358.0,
child: TextField(
decoration: const InputDecoration(
border: InputBorder.none,
hintText: "",
),
controller: widget.controller,
style: GoogleFonts.montserrat(
fontSize: 20.0,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
)
],
),
),
feedback: Material(
type: MaterialType.transparency,
child: Container(
width: 406.0,
height: 406.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: const Color.fromARGB(255, 249, 249, 249),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.015),
blurRadius: 12.0,
spreadRadius: 6.0,
offset: const Offset(0.0, 0.0),
),
]),
child: Stack(
children: [
Positioned(
top: 84,
left: 24,
right: 24,
bottom: 24,
child: Container(
child: widget.child,
),
),
Positioned(
top: 0,
right: 0,
left: 0,
child: Container(
width: 406.0,
height: 60.0,
decoration: BoxDecoration(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(15.0),
),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
offset: const Offset(0, 6.0),
blurRadius: 12.0,
)
]),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Align(
alignment: Alignment.centerLeft,
child: SizedBox(
width: 358.0,
child: TextField(
decoration: const InputDecoration(
border: InputBorder.none,
hintText: "",
),
controller: widget.controller,
style: GoogleFonts.montserrat(
fontSize: 20.0,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
)
],
),
),
),
childWhenDragging: Container(
height: 500,
width: 500,
color: Colors.transparent,
),
onDragEnd: (details) {
//set the item to position 0 in the list
setState(() {
widget.x = details.offset.dx;
widget.y = details.offset.dy;
});
},
),
),
);
}
}
如您所見,需要傳遞一個孩子,它將顯示在主容器中。我不確定我是否在做正確的擴展(我是個初學者),但這是我的 TextWindow 的代碼:
class TextWindow extends Window {
TextWindow({Key? key})
: super(
key: UniqueKey(),
title: "Text",
child: TextField(
onChanged: (value) {},
keyboardType: TextInputType.multiline,
maxLines: 50,
decoration: InputDecoration(
hintText: getRandomHint(),
border: InputBorder.none,
hintStyle: GoogleFonts.montserrat(
fontSize: 15.0,
fontWeight: FontWeight.w500,
),
),
style: GoogleFonts.montserrat(
fontSize: 15.0,
fontWeight: FontWeight.w600,
),
),
);
Widget build(BuildContext context) {
return this;
}
}
我找不到狀態更新可能會將孩子重置為其原點的點。
自己看看這個問題:https ://weazleboii.github.io/webboard/index.html#/
uj5u.com熱心網友回復:
我猜你會看到這個,因為你實際上并沒有將任何狀態放入有狀態的小部件中。每當您拖動視窗時,我想它會強制重新繪制所有小部件,如果您的有狀態小部件保持文本欄位的狀態,我想一切都會好起來的。
因此,例如,_WindowState除了您擁有的東西之外,您還可以擁有:
class _WindowState extends State<Window> {
String fieldValue = "";
@override
void initState() {
super.initState();
fieldValue = widget.title;
}
現在,您的有狀態小部件包含fieldValue, 所以現在當您更改它時,更新狀態并使用它。例如:
...TextField(
...,
onChanged: (value) {
setState(() {
fieldValue = value;
});
}
)
現在,如果您使用fieldValue一切應該沒問題....我也會將controller之類的東西移到_WindowState課堂上。(這不會修復您小時候傳入的文本欄位(我想知道您為什么這樣做),因為它也沒有在任何地方保存任何狀態。)
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/467961.html
上一篇:如何在顫動中計算串列的特定長度
