কার্ড

Card কম্পোজেবল আপনার UI এর জন্য একটি মেটেরিয়াল ডিজাইন কন্টেইনার হিসেবে কাজ করে। কার্ডগুলি সাধারণত একটি একক সুসংগত বিষয়বস্তু উপস্থাপন করে। আপনি কোথায় একটি কার্ড ব্যবহার করতে পারেন তার কিছু উদাহরণ নিচে দেওয়া হল:

  • একটি শপিং অ্যাপে একটি পণ্য।
  • একটি নিউজ অ্যাপে একটি খবর।
  • একটি যোগাযোগ অ্যাপে একটি বার্তা।

Card অন্যান্য কন্টেইনার থেকে আলাদা করে এমন একটি কন্টেন্টের উপর জোর দেওয়াটাই কার্ডকে আলাদা করে। উদাহরণস্বরূপ, Scaffold একটি সম্পূর্ণ স্ক্রিনের সাধারণ কাঠামো প্রদান করে। কার্ড সাধারণত একটি বৃহত্তর লেআউটের ভিতরে একটি ছোট UI উপাদান, যেখানে Column বা Row এর মতো একটি লেআউট উপাদান একটি সহজ এবং আরও সাধারণ API প্রদান করে।

লেখা এবং আইকন দিয়ে ভরা একটি উন্নত কার্ড।
চিত্র ১। টেক্সট এবং আইকন দিয়ে ভরা একটি কার্ডের উদাহরণ।

মৌলিক বাস্তবায়ন

Card কম্পোজের অন্যান্য কন্টেইনারের মতোই আচরণ করে। আপনি এর মধ্যে থাকা অন্যান্য কম্পোজেবলগুলিকে কল করে এর বিষয়বস্তু ঘোষণা করেন। উদাহরণস্বরূপ, নিম্নলিখিত ন্যূনতম উদাহরণে Card কীভাবে Text কল ধারণ করে তা বিবেচনা করুন:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

উন্নত বাস্তবায়ন

Card API সংজ্ঞার জন্য রেফারেন্সটি দেখুন। এটি বেশ কয়েকটি পরামিতি সংজ্ঞায়িত করে যা আপনাকে উপাদানটির চেহারা এবং আচরণ কাস্টমাইজ করতে দেয়।

কিছু গুরুত্বপূর্ণ পরামিতি যা লক্ষ্য করা উচিত তা হল:

  • elevation : কম্পোনেন্টে একটি ছায়া যোগ করে যা এটিকে পটভূমির উপরে উঁচু করে দেখায়।
  • colors : কন্টেইনার এবং যেকোনো শিশু উভয়ের ডিফল্ট রঙ সেট করতে CardColors টাইপ ব্যবহার করে।
  • enabled : যদি আপনি এই প্যারামিটারের জন্য false পাস করেন, তাহলে কার্ডটি অক্ষম হিসাবে প্রদর্শিত হবে এবং ব্যবহারকারীর ইনপুটে সাড়া দেবে না।
  • onClick : সাধারণত, একটি Card ক্লিক ইভেন্ট গ্রহণ করে না। অতএব, আপনি যে প্রাথমিক ওভারলোডটি লক্ষ্য করতে চান তা হল একটি onClick প্যারামিটার সংজ্ঞায়িত করে। আপনি যদি চান যে আপনার Card বাস্তবায়ন ব্যবহারকারীর চাপের প্রতিক্রিয়া জানাবে তবে আপনার এই ওভারলোডটি ব্যবহার করা উচিত।

নিম্নলিখিত উদাহরণটি দেখায় যে আপনি কীভাবে এই পরামিতিগুলি ব্যবহার করতে পারেন, সেইসাথে অন্যান্য সাধারণ পরামিতি যেমন shape এবং modifier ।

ভর্তি কার্ড

আপনি কীভাবে একটি পূর্ণ কার্ড বাস্তবায়ন করতে পারেন তার একটি উদাহরণ নিচে দেওয়া হল।

এখানে মূল বিষয় হল ভরা রঙ পরিবর্তন করার জন্য colors বৈশিষ্ট্য ব্যবহার করা। 

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

এই বাস্তবায়নটি নিম্নরূপ দেখাচ্ছে:

একটি কার্ড ম্যাটেরিয়াল থিমের পৃষ্ঠের বৈকল্পিক রঙ দিয়ে পূর্ণ।
চিত্র ২। একটি ভরাট কার্ডের উদাহরণ।

এলিভেটেড কার্ড

নিচের স্নিপেটটি একটি এলিভেটেড কার্ড কীভাবে বাস্তবায়ন করতে হয় তা দেখায়। ডেডিকেটেড ElevatedCard কম্পোজেবল ব্যবহার করুন।

উচ্চতার উপস্থিতি এবং এর ফলে তৈরি ছায়া নিয়ন্ত্রণ করতে আপনি elevation বৈশিষ্ট্যটি ব্যবহার করতে পারেন। 

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

এই বাস্তবায়নটি নিম্নরূপ দেখাচ্ছে:

অ্যাপের পটভূমির উপরে একটি কার্ড উঁচু করা হয়েছে, যার একটি ছায়া রয়েছে।
চিত্র ৩। একটি উন্নত কার্ডের উদাহরণ।

রূপরেখাযুক্ত কার্ড

নিচে একটি আউটলাইন করা কার্ডের উদাহরণ দেওয়া হল। ডেডিকেটেড OutlinedCard কম্পোজেবল ব্যবহার করুন। 

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

এই বাস্তবায়নটি নিম্নরূপ দেখাচ্ছে:

একটি কার্ডের আউটলাইনটি একটি পাতলা কালো সীমানা দিয়ে আঁকা।
চিত্র ৪। একটি রূপরেখাযুক্ত কার্ডের উদাহরণ।

সীমাবদ্ধতা

কার্ডগুলিতে সহজাত স্ক্রোল বা ডিসমিস অ্যাকশন থাকে না, তবে এই বৈশিষ্ট্যগুলি প্রদানকারী কম্পোজেবলের সাথে একীভূত হতে পারে। উদাহরণস্বরূপ, একটি কার্ডে swipe to dismiss বাস্তবায়ন করতে, এটি SwipeToDismiss কম্পোজেবলের সাথে একীভূত করুন। স্ক্রোলের সাথে একীভূত করতে, verticalScroll এর মতো স্ক্রোল মডিফায়ার ব্যবহার করুন। আরও তথ্যের জন্য স্ক্রোল ডকুমেন্টেশন দেখুন।

অতিরিক্ত সম্পদ