কার্ড

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

  • শপিং অ্যাপে কোনও প্রোডাক্ট।
  • খবরের অ্যাপে কোনও খবরের গল্প।
  • যোগাযোগের অ্যাপে মেসেজ।

অন্যান্য কন্টেনার থেকে Card-কে আলাদা করে দেখানোর জন্য একটি কন্টেন্টের উপর ফোকাস করা হয়। যেমন, Scaffold পুরো স্ক্রিনের সাধারণ স্ট্রাকচার প্রদান করে। কার্ড হল সাধারণত একটি বড় লেআউটের মধ্যে থাকা ছোট UI এলিমেন্ট, যেখানে Column বা Row-এর মতো লেআউট কম্পোনেন্ট আরও সহজ ও জেনেরিক API প্রদান করে।

টেক্সট ও আইকন সহ একটি উন্নত কার্ড।
ছবি ১. টেক্সট ও আইকন সহ কার্ডের উদাহরণ।

প্রাথমিক প্রয়োগ

Card Compose-এর অন্যান্য কন্টেনারের মতোই আচরণ করে। এর মধ্যে অন্যান্য কম্পোজেবল কল করে আপনি এর কন্টেন্ট ঘোষণা করেন। যেমন, নিম্নলিখিত ন্যূনতম উদাহরণে 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,
        )
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

কার্ডটি মেটেরিয়াল থিম থেকে সারফেস ভেরিয়েন্ট কালার দিয়ে পূরণ করা হয়।
ছবি ২. পূরণ করা কার্ডের উদাহরণ।

উন্নত কার্ড

নিচের স্নিপেট থেকে বোঝা যাবে যে কীভাবে এলিভেটেড কার্ড প্রয়োগ করতে হয়। ডেডিকেটেড 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,
        )
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

অ্যাপের ব্যাকগ্রাউন্ডের উপরে একটি কার্ড উঁচু করে দেখানো হয়েছে, যার একটি ছায়া রয়েছে।
ছবি ৩. উন্নত কার্ডের উদাহরণ।

আউটলাইনযুক্ত কার্ড

নিচে আউটলাইন করা কার্ডের একটি উদাহরণ দেওয়া হল। ডেডিকেটেড 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,
        )
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

একটি কার্ডের চারপাশে কালো রঙের সরু বর্ডার দেওয়া আছে।
ছবি ৪. আউটলাইন করা কার্ডের উদাহরণ।

সীমাবদ্ধতা

কার্ডে অন্তর্নিহিত স্ক্রল বা বাতিল করার অ্যাকশন থাকে না, তবে এই ফিচার অফার করে এমন কম্পোজেবল এলিমেন্টের সাথে ইন্টিগ্রেট করা যেতে পারে। যেমন, কোনও কার্ডে সোয়াইপ করে বাতিল করার সুবিধা ইমপ্লিমেন্ট করতে, এটিকে SwipeToDismiss কম্পোজেবল ফাংশনের সাথে ইন্টিগ্রেট করুন। স্ক্রলের সাথে ইন্টিগ্রেট করতে, verticalScroll-এর মতো স্ক্রল মডিফায়ার ব্যবহার করুন। আরও তথ্যের জন্য Scroll ডকুমেন্টেশন দেখুন।

অতিরিক্ত রিসোর্স