如何解决如何在 Flutter 中相对于另一个小部件定位?
我有一张图片,我想在上面放置小图片。我已经有了这些图像相对于原始图像的位置(宽度、高度、topLeftX、topLeftY、bottomright..)。
我无法将这些小图像(在下面的附加示例中由蓝色框表示)相对于图像放置。它们始终相对于整个屏幕进行定位。
这是我尝试过的:
Stack(
children:[
Positioned(
top: 245,left: 43,width: 200,height: 200,child:Container(color:Colors.blue)),Container(
child:PhotoView(imageProvider: Assetimage("lib/assets/3D_example_2.png"),controller: controller,)),])
我怎样才能相对于图像放置我的图像(矩形)? 我还想相对于原始图像缩放这些图像的宽度和高度,并允许它们在缩放时与原始图像一起移动..
知道如何做到这些吗?
谢谢!
解决方法
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,home: HomePage(),),);
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Rough Work",centerTitle: true,body: Stack(
overflow: Overflow.visible,children: [
Positioned(
top: 200,left: 100,child: Container(
height: 200,width: 200,color: Colors.teal,child: Stack(
children: [
Positioned(
top: 12,child: Container(
height: 150,width: 150,child: Image(
image: NetworkImage(
"https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),],);
}
}
,
我建议改为将框的宽度和高度添加到 Container 小部件,但除此之外,您的代码似乎没有问题。所以我认为行为可能与父小部件有关:
签出以下代码:
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(home: HomePage(),theme: ThemeData.light()
),);
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
Stack(
overflow: Overflow.visible,children: [
Positioned(
top: 245,left: 43,child: Container(
color: Colors.lightGreen,width: 100,height: 100,Positioned(
top: -50,left: 120,child: Container(
color: Colors.redAccent,Container(
color: Colors.indigo,height: 200,)
],);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。