XR-এর জন্য Jetpack Compose দিয়ে UI ডেভেলপ করুন

XR-এর জন্য Jetpack Compose-এর মাধ্যমে, আপনি সারি এবং কলামের মতো পরিচিত রচনা ধারণা ব্যবহার করে ঘোষণামূলকভাবে আপনার স্থানিক UI এবং বিন্যাস তৈরি করতে পারেন। এটি আপনাকে আপনার বিদ্যমান Android UI 3D স্পেসে প্রসারিত করতে বা সম্পূর্ণ নতুন নিমজ্জিত 3D অ্যাপ্লিকেশন তৈরি করতে দেয়৷

আপনি যদি একটি বিদ্যমান অ্যান্ড্রয়েড ভিউ-ভিত্তিক অ্যাপকে স্থানান্তরিত করেন তবে আপনার কাছে বেশ কয়েকটি বিকাশের বিকল্প রয়েছে। আপনি আন্তঃঅপারেবিলিটি API ব্যবহার করতে পারেন, কম্পোজ এবং ভিউ একসাথে ব্যবহার করতে পারেন, অথবা সিনকোর লাইব্রেরির সাথে সরাসরি কাজ করতে পারেন। আরও বিস্তারিত জানার জন্য ভিউ নিয়ে কাজ করার জন্য আমাদের গাইড দেখুন।

সাবস্পেস এবং স্থানিক উপাদান সম্পর্কে

আপনি যখন Android XR-এর জন্য আপনার অ্যাপ লিখছেন, তখন সাবস্পেস এবং স্থানিক উপাদানগুলির ধারণাগুলি বোঝা গুরুত্বপূর্ণ৷

সাবস্পেস সম্পর্কে

Android XR-এর জন্য বিকাশ করার সময়, আপনাকে আপনার অ্যাপ বা লেআউটে একটি সাবস্পেস যোগ করতে হবে। একটি সাবস্পেস হল আপনার অ্যাপের মধ্যে 3D স্পেসের একটি পার্টিশন যেখানে আপনি 3D সামগ্রী রাখতে পারেন, 3D লেআউট তৈরি করতে পারেন এবং অন্যথায় 2D সামগ্রীতে গভীরতা যোগ করতে পারেন। স্থানিককরণ সক্ষম হলেই একটি সাবস্পেস রেন্ডার করা হয়। হোম স্পেস বা নন-এক্সআর ডিভাইসে, সেই সাবস্পেসের মধ্যে যেকোন কোড উপেক্ষা করা হয়।

একটি সাবস্পেস তৈরি করার দুটি উপায় আছে:

  • setSubspaceContent() : এই ফাংশনটি একটি অ্যাপ-লেভেল সাবস্পেস তৈরি করে। এটিকে আপনার প্রধান কার্যকলাপে বলা যেতে পারে যেভাবে আপনি setContent() ব্যবহার করেন। একটি অ্যাপ-লেভেল সাবস্পেস উচ্চতা, প্রস্থ এবং গভীরতায় সীমাহীন, মূলত স্থানিক বিষয়বস্তুর জন্য একটি অসীম ক্যানভাস প্রদান করে।
  • Subspace : এই সংমিশ্রণযোগ্যটিকে আপনার অ্যাপের UI অনুক্রমের মধ্যে যে কোনও জায়গায় স্থাপন করা যেতে পারে, যা আপনাকে ফাইলগুলির মধ্যে প্রসঙ্গ না হারিয়ে 2D এবং স্থানিক UI এর জন্য লেআউটগুলি বজায় রাখতে দেয়৷ এটি আপনার পুরো UI ট্রির মাধ্যমে স্টেট উত্তোলনের প্রয়োজন ছাড়াই XR এবং অন্যান্য ফর্ম ফ্যাক্টরগুলির মধ্যে বিদ্যমান অ্যাপ আর্কিটেকচারের মতো জিনিসগুলিকে ভাগ করা সহজ করে তোলে বা আপনার অ্যাপকে পুনরায় আর্কিটেক্ট করার প্রয়োজন নেই৷

আরও তথ্যের জন্য, আপনার অ্যাপে একটি সাবস্পেস যোগ করুন দেখুন।

স্থানিক উপাদান সম্পর্কে

সাবস্পেস কম্পোজেবল : এই উপাদানগুলি শুধুমাত্র একটি সাবস্পেসে রেন্ডার করা যেতে পারে। একটি 2D লেআউটের মধ্যে স্থাপন করার আগে সেগুলি অবশ্যই Subspace বা setSubspaceContent() এর মধ্যে আবদ্ধ থাকতে হবে। একটি SubspaceModifier আপনাকে আপনার সাবস্পেস কম্পোজেবলগুলিতে গভীরতা, অফসেট এবং অবস্থানের মতো বৈশিষ্ট্যগুলি যোগ করতে দেয়।

অন্যান্য স্থানিক উপাদানগুলির একটি সাবস্পেসের ভিতরে ডাকা প্রয়োজন হয় না। তারা একটি স্থানিক পাত্রের মধ্যে আবৃত প্রচলিত 2D উপাদান নিয়ে গঠিত। এই উপাদানগুলি 2D বা 3D লেআউটের মধ্যে ব্যবহার করা যেতে পারে যদি উভয়ের জন্য সংজ্ঞায়িত করা হয়। যখন স্থানিকীকরণ সক্ষম না হয়, তখন তাদের স্থানিক বৈশিষ্ট্যগুলি উপেক্ষা করা হবে এবং তারা তাদের 2D প্রতিরূপগুলিতে ফিরে আসবে৷

একটি স্থানিক প্যানেল তৈরি করুন

একটি SpatialPanel হল একটি সাবস্পেস কম্পোজযোগ্য যা আপনাকে অ্যাপের সামগ্রী প্রদর্শন করতে দেয়-উদাহরণস্বরূপ, আপনি একটি স্থানিক প্যানেলে ভিডিও প্লেব্যাক, স্থির চিত্র বা অন্য কোনো সামগ্রী প্রদর্শন করতে পারেন।

একটি স্থানিক UI প্যানেলের উদাহরণ

আপনি স্থানিক প্যানেলের আকার, আচরণ এবং অবস্থান পরিবর্তন করতে SubspaceModifier ব্যবহার করতে পারেন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .movable()
            .resizable()
    ) {
        SpatialPanelContent()
    }
}

@Composable
fun SpatialPanelContent() {
    Box(
        Modifier
            .background(color = Color.Black)
            .height(500.dp)
            .width(500.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Spatial Panel",
            color = Color.White,
            fontSize = 25.sp
        )
    }
}

কোড সম্পর্কে মূল পয়েন্ট

  • যেহেতু SpatialPanel APIগুলি হল সাবস্পেস কম্পোজেবল, আপনাকে অবশ্যই সেগুলিকে Subspace বা setSubspaceContent() এর ভিতরে কল করতে হবে। একটি সাবস্পেস এর বাইরে তাদের কল একটি ব্যতিক্রম নিক্ষেপ.
  • SpatialPanel এর আকার SubspaceModifierheight এবং width স্পেসিফিকেশন ব্যবহার করে সেট করা হয়েছে। এই স্পেসিফিকেশনগুলি বাদ দিলে প্যানেলের আকার তার বিষয়বস্তুর পরিমাপ দ্বারা নির্ধারিত হতে পারে।
  • movable বা resizable সংশোধক যোগ করে ব্যবহারকারীকে প্যানেলের আকার পরিবর্তন বা সরানোর অনুমতি দিন।
  • আকার এবং অবস্থান সম্পর্কে বিশদ বিবরণের জন্য আমাদের স্থানিক প্যানেল ডিজাইন নির্দেশিকা দেখুন। কোড বাস্তবায়নের উপর আরো সুনির্দিষ্ট তথ্যের জন্য আমাদের রেফারেন্স ডকুমেন্টেশন দেখুন।

কিভাবে একটি চলমান সাবস্পেস সংশোধক কাজ করে

যেহেতু একজন ব্যবহারকারী একটি প্যানেলকে তাদের থেকে দূরে সরিয়ে দেয়, ডিফল্টরূপে একটি চলমান সাবস্পেস মডিফায়ার প্যানেলটিকে একইভাবে স্কেল করে যেভাবে হোম স্পেসে সিস্টেম দ্বারা প্যানেলের আকার পরিবর্তন করা হয়। সমস্ত শিশু বিষয়বস্তু এই আচরণের উত্তরাধিকারী। এটি নিষ্ক্রিয় করতে, scaleWithDistance প্যারামিটারটিকে false সেট করুন।

একটি অরবিটার তৈরি করুন

একটি অরবিটার একটি স্থানিক UI উপাদান। এটি একটি সংশ্লিষ্ট স্থানিক প্যানেল, লেআউট বা অন্যান্য সত্তার সাথে সংযুক্ত করার জন্য ডিজাইন করা হয়েছে। একটি অরবিটারে সাধারণত ন্যাভিগেশন এবং প্রাসঙ্গিক অ্যাকশন আইটেম থাকে যা এটি নোঙর করা হয় তার সাথে সম্পর্কিত। উদাহরণস্বরূপ, আপনি যদি ভিডিও সামগ্রী প্রদর্শনের জন্য একটি স্থানিক প্যানেল তৈরি করে থাকেন, তাহলে আপনি একটি অরবিটারের ভিতরে ভিডিও প্লেব্যাক নিয়ন্ত্রণ যোগ করতে পারেন।

একটি অরবিটারের উদাহরণ

নিম্নলিখিত উদাহরণে দেখানো হয়েছে, ন্যাভিগেশনের মতো ব্যবহারকারীর নিয়ন্ত্রণগুলি মোড়ানোর জন্য একটি SpatialPanel এ 2D লেআউটের ভিতরে একটি অরবিটারকে কল করুন। এটি করা আপনার 2D লেআউট থেকে এগুলিকে বের করে এবং আপনার কনফিগারেশন অনুযায়ী স্থানিক প্যানেলে সংযুক্ত করে।

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .movable()
            .resizable()
    ) {
        SpatialPanelContent()
        OrbiterExample()
    }
}

@Composable
fun OrbiterExample() {
    Orbiter(
        position = OrbiterEdge.Bottom,
        offset = 96.dp,
        alignment = Alignment.CenterHorizontally
    ) {
        Surface(Modifier.clip(CircleShape)) {
            Row(
                Modifier
                    .background(color = Color.Black)
                    .height(100.dp)
                    .width(600.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Orbiter",
                    color = Color.White,
                    fontSize = 50.sp
                )
            }
        }
    }
}

কোড সম্পর্কে মূল পয়েন্ট

  • যেহেতু অরবিটারগুলি স্থানিক UI উপাদান, কোডটি 2D বা 3D লেআউটে পুনরায় ব্যবহার করা যেতে পারে। একটি 2D বিন্যাসে, আপনার অ্যাপ শুধুমাত্র অরবিটারের ভিতরের বিষয়বস্তু রেন্ডার করে এবং অরবিটারকে উপেক্ষা করে।
  • অরবিটারগুলি কীভাবে ব্যবহার এবং ডিজাইন করবেন সে সম্পর্কে আরও তথ্যের জন্য আমাদের নকশা নির্দেশিকা দেখুন।

একটি স্থানিক বিন্যাসে একাধিক স্থানিক প্যানেল যোগ করুন

আপনি একাধিক স্থানিক প্যানেল তৈরি করতে পারেন এবং SpatialRow , SpatialColumn , SpatialBox , এবং SpatialLayoutSpacer ব্যবহার করে একটি স্থানিক বিন্যাসের মধ্যে তাদের স্থাপন করতে পারেন৷

একটি স্থানিক বিন্যাসে একাধিক স্থানিক প্যানেলের উদাহরণ

নিম্নলিখিত কোড উদাহরণ দেখায় কিভাবে এটি করতে হয়.

Subspace {
    SpatialRow {
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Left")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Left")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Left")
            }
        }
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Right")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Right")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Right")
            }
        }
    }
}

@Composable
fun SpatialPanelContent(text: String) {
    Column(
        Modifier
            .background(color = Color.Black)
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Panel",
            color = Color.White,
            fontSize = 15.sp
        )
        Text(
            text = text,
            color = Color.White,
            fontSize = 25.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

কোড সম্পর্কে মূল পয়েন্ট

  • SpatialRow , SpatialColumn , SpatialBox , এবং SpatialLayoutSpacer হল সব সাবস্পেস কম্পোজেবল এবং অবশ্যই একটি সাবস্পেসের মধ্যে স্থাপন করতে হবে৷
  • আপনার লেআউট কাস্টমাইজ করতে SubspaceModifier ব্যবহার করুন।
  • একটি সারিতে একাধিক প্যানেল সহ লেআউটের জন্য, আমরা একটি SubspaceModifier ব্যবহার করে 825dp এর একটি কার্ভ ব্যাসার্ধ সেট করার পরামর্শ দিই যাতে প্যানেলগুলি আপনার ব্যবহারকারীকে ঘিরে থাকে৷ বিস্তারিত জানার জন্য আমাদের ডিজাইন নির্দেশিকা দেখুন।

আপনার লেআউটে একটি 3D বস্তু স্থাপন করতে একটি ভলিউম ব্যবহার করুন

আপনার লেআউটে একটি 3D অবজেক্ট স্থাপন করতে, আপনাকে একটি সাবস্পেস কম্পোজেবল ব্যবহার করতে হবে যাকে ভলিউম বলা হয়। এটি কিভাবে করতে হয় তার একটি উদাহরণ এখানে।

একটি লেআউটে একটি 3D বস্তুর উদাহরণ

Subspace {
    SpatialPanel(
        SubspaceModifier.height(1500.dp).width(1500.dp)
            .resizable().movable()
    ) {
        ObjectInAVolume(true)
        Box(
            Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Welcome",
                fontSize = 50.sp,
            )
        }
    }
}

@Composable
fun ObjectInAVolume(show3DObject: Boolean) {

অতিরিক্ত তথ্য

ছবি বা ভিডিও সামগ্রীর জন্য একটি পৃষ্ঠ যোগ করুন

একটি SpatialExternalSurface হল একটি সাবস্পেস কম্পোজেবল যা Surface তৈরি এবং পরিচালনা করে যেখানে আপনার অ্যাপ ছবি বা ভিডিওর মতো বিষয়বস্তু আঁকতে পারে। SpatialExternalSurface হয় স্টেরিওস্কোপিক বা মনোস্কোপিক বিষয়বস্তু সমর্থন করে।

এই উদাহরণটি দেখায় কিভাবে মিডিয়া3 এক্সোপ্লেয়ার এবং SpatialExternalSurface ব্যবহার করে পাশাপাশি স্টেরিওস্কোপিক ভিডিও লোড করতে হয়:

@Composable
fun SpatialExternalSurfaceContent() {
    val context = LocalContext.current
    Subspace {
        SpatialExternalSurface(
            modifier = SubspaceModifier
                .width(1200.dp) // Default width is 400.dp if no width modifier is specified
                .height(676.dp), // Default height is 400.dp if no height modifier is specified
            // Use StereoMode.Mono, StereoMode.SideBySide, or StereoMode.TopBottom, depending
            // upon which type of content you are rendering: monoscopic content, side-by-side stereo
            // content, or top-bottom stereo content
            stereoMode = StereoMode.SideBySide,
        ) {
            val exoPlayer = remember { ExoPlayer.Builder(context).build() }
            val videoUri = Uri.Builder()
                .scheme(ContentResolver.SCHEME_ANDROID_RESOURCE)
                // Represents a side-by-side stereo video, where each frame contains a pair of
                // video frames arranged side-by-side. The frame on the left represents the left
                // eye view, and the frame on the right represents the right eye view.
                .path("sbs_video.mp4")
                .build()
            val mediaItem = MediaItem.fromUri(videoUri)

            // onSurfaceCreated is invoked only one time, when the Surface is created
            onSurfaceCreated { surface ->
                exoPlayer.setVideoSurface(surface)
                exoPlayer.setMediaItem(mediaItem)
                exoPlayer.prepare()
                exoPlayer.play()
            }
            // onSurfaceDestroyed is invoked when the SpatialExternalSurface composable and its
            // associated Surface are destroyed
            onSurfaceDestroyed { exoPlayer.release() }
        }
    }
}

কোড সম্পর্কে মূল পয়েন্ট

  • আপনি কোন ধরনের সামগ্রী রেন্ডার করছেন তার উপর নির্ভর করে StereoMode Mono , SideBySide , বা TopBottom এ সেট করুন:
    • Mono : ইমেজ বা ভিডিও ফ্রেমে একটি একক, অভিন্ন চিত্র থাকে যা উভয় চোখেই দেখানো হয়।
    • SideBySide : ইমেজ বা ভিডিও ফ্রেমে একজোড়া ছবি বা ভিডিও ফ্রেম পাশাপাশি সাজানো থাকে, যেখানে বাম দিকের ছবি বা ফ্রেমটি বাম চোখের দৃশ্যকে উপস্থাপন করে এবং ডানদিকের ছবি বা ফ্রেমটি ডান চোখের দৃশ্যকে উপস্থাপন করে।
    • TopBottom : ইমেজ বা ভিডিও ফ্রেমে উল্লম্বভাবে স্ট্যাক করা এক জোড়া ছবি বা ভিডিও ফ্রেম থাকে, যেখানে উপরের ছবি বা ফ্রেমটি বাম চোখের দৃশ্যকে প্রতিনিধিত্ব করে এবং নীচের ছবিটি বা ফ্রেমটি ডান চোখের দৃশ্যকে উপস্থাপন করে।
  • SpatialExternalSurface শুধুমাত্র আয়তক্ষেত্রাকার পৃষ্ঠতল সমর্থন করে।
  • এই Surface ইনপুট ইভেন্টগুলি ক্যাপচার করে না।
  • অ্যাপ্লিকেশন রেন্ডারিং বা ভিডিও ডিকোডিংয়ের সাথে StereoMode পরিবর্তনগুলি সিঙ্ক্রোনাইজ করা সম্ভব নয়৷
  • এই কম্পোজেবলটি অন্য প্যানেলের সামনে রেন্ডার করতে পারে না, তাই লেআউটে অন্য প্যানেল থাকলে আপনার চলমান পরিবর্তনকারী ব্যবহার করা উচিত নয়।

অন্যান্য স্থানিক UI উপাদান যোগ করুন

স্থানিক UI উপাদানগুলি আপনার অ্যাপ্লিকেশনের UI অনুক্রমের যে কোনও জায়গায় স্থাপন করা যেতে পারে। এই উপাদানগুলি আপনার 2D UI তে পুনরায় ব্যবহার করা যেতে পারে, এবং তাদের স্থানিক বৈশিষ্ট্যগুলি শুধুমাত্র তখনই দৃশ্যমান হবে যখন স্থানিক ক্ষমতাগুলি সক্ষম হবে৷ এটি আপনাকে আপনার কোড দুবার লেখার প্রয়োজন ছাড়াই মেনু, ডায়ালগ এবং অন্যান্য উপাদানগুলিতে উচ্চতা যোগ করতে দেয়। এই উপাদানগুলি কীভাবে ব্যবহার করবেন তা আরও ভালভাবে বুঝতে স্থানিক UI এর নিম্নলিখিত উদাহরণগুলি দেখুন।

UI উপাদান

যখন স্থানিককরণ সক্ষম করা হয়

2D পরিবেশে

SpatialDialog

একটি উন্নত ডায়ালগ প্রদর্শন করতে প্যানেলটি z-গভীরতায় কিছুটা পিছনে ঠেলে দেবে

2D Dialog ফিরে আসে।

SpatialPopup

প্যানেল একটি উন্নত পপআপ প্রদর্শন করতে z-গভীরতায় কিছুটা পিছনে ঠেলে দেবে

একটি 2D Popup ফিরে আসে।

SpatialElevation

SpatialElevationLevel উচ্চতা যোগ করতে সেট করা যেতে পারে।

স্থানিক উচ্চতা ছাড়াই দেখায়।

স্থানিক ডায়ালগ

এটি একটি সংলাপের একটি উদাহরণ যা অল্প বিলম্বের পরে খোলে৷ যখন SpatialDialog ব্যবহার করা হয়, তখন ডায়ালগটি স্থানিক প্যানেলের মতো একই z-গভীরতায় উপস্থিত হয় এবং যখন স্থানিককরণ সক্ষম করা হয় তখন প্যানেলটি 125dp দ্বারা পিছনে ঠেলে দেওয়া হয়। SpatialDialog ব্যবহার করা যেতে পারে যখন স্থানিকীকরণ সক্ষম না থাকে, সেক্ষেত্রে SpatialDialog এর 2D প্রতিরূপ, Dialog ফিরে আসে।

@Composable
fun DelayedDialog() {
    var showDialog by remember { mutableStateOf(false) }
    LaunchedEffect(Unit) {
        delay(3000)
        showDialog = true
    }
    if (showDialog) {
        SpatialDialog(
            onDismissRequest = { showDialog = false },
            SpatialDialogProperties(
                dismissOnBackPress = true
            )
        ) {
            Box(
                Modifier
                    .height(150.dp)
                    .width(150.dp)
            ) {
                Button(onClick = { showDialog = false }) {
                    Text("OK")
                }
            }
        }
    }
}

কোড সম্পর্কে মূল পয়েন্ট

কাস্টম প্যানেল এবং লেআউট তৈরি করুন

XR-এর জন্য রচনা দ্বারা সমর্থিত নয় এমন কাস্টম প্যানেল তৈরি করতে, আপনি SceneCore API ব্যবহার করে PanelEntity দৃষ্টান্ত এবং দৃশ্য গ্রাফের সাথে সরাসরি কাজ করতে পারেন।

স্থানিক বিন্যাস এবং অন্যান্য সত্তা নোঙ্গর অরবিটার

আপনি কম্পোজে ঘোষিত যেকোন সত্তায় একটি অরবিটারকে অ্যাঙ্কর করতে পারেন। এর মধ্যে UI উপাদান যেমন SpatialRow , SpatialColumn , বা SpatialBox এর একটি স্থানিক বিন্যাসে একটি অরবিটার ঘোষণা করা জড়িত। আপনি যেখানে এটি ঘোষণা করেছেন তার নিকটবর্তী মূল সত্তায় অরবিটার অ্যাঙ্কর করে।

অরবিটারের আচরণ আপনি যেখানে ঘোষণা করেন তার দ্বারা নির্ধারিত হয়:

  • একটি SpatialPanel এ মোড়ানো একটি 2D বিন্যাসে ( পূর্ববর্তী কোড স্নিপেটে দেখানো হয়েছে), অরবিটার সেই SpatialPanel এ নোঙর করে।
  • একটি Subspace , অরবিটারটি নিকটতম মূল সত্তার কাছে নোঙ্গর করে, যা স্থানিক বিন্যাস যেখানে অরবিটার ঘোষণা করা হয়।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি স্থানিক সারিতে একটি অরবিটারকে নোঙ্গর করতে হয়:

Subspace {
    SpatialRow {
        Orbiter(
            position = OrbiterEdge.Top,
            offset = EdgeOffset.inner(8.dp),
            shape = SpatialRoundedCornerShape(size = CornerSize(50))
        ) {
            Text(
                "Hello World!",
                style = MaterialTheme.typography.h2,
                modifier = Modifier
                    .background(Color.White)
                    .padding(16.dp)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Red)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
            )
        }
    }
}

কোড সম্পর্কে মূল পয়েন্ট

  • আপনি যখন একটি 2D লেআউটের বাইরে একটি অরবিটার ঘোষণা করেন, তখন অরবিটারটি তার নিকটতম মূল সত্তায় নোঙর করে। এই ক্ষেত্রে, অরবিটার নোঙ্গর করে SpatialRow এর শীর্ষে এটি ঘোষণা করা হয়েছে।
  • স্থানিক বিন্যাস যেমন SpatialRow , SpatialColumn , SpatialBox সকলের সাথে বিষয়বস্তুহীন সত্তা যুক্ত থাকে৷ অতএব, একটি স্থানিক বিন্যাসে ঘোষিত একটি অরবিটার সেই বিন্যাসে নোঙর করে।

এছাড়াও দেখুন