استفاده از این محتوا رایگان میباشد

چارا برای خلق ارزش و توسعه مهارت های درونی و رشد استعدادها و جایی برای انجام پروژهای برنامه نویسی هست، هدف ما پیاده سازی ایده شما و توسعه مهارت های فردی کاربران برای ارتقا و اجرای هدفمندانه کسب و کارها میباشد بیشتر آموزش های سایت به صورت رایگان در اختیار شما هستند اما برای دسترسی به همه آموزش ها نیازمند تهیه عضویت ویژه سایت ما میباشید.

کاربرد ویجت Row در فلاتر (بخش 7 ) ❤️

 

اول یه توضیحی در مورد Row بدم وقتی خواسته باشیم از سطر و ویجت هامون هر چی روکه خواستیم به صورت افقی چیده بشه از Row استفاده میکنیم خب واسه اینکه بهتر متوجه بشیم من میام داخلش چندتا ویجت قرار میدم واسه اینکه از چندتا ویجت توی Row استفاده کنیم عبارت Childeren و تایپ میکنیم توش و چیز هایی که میخوایم و توش یکی یکی قرار میدم یه دونه ویجت Text قرار میدم و یه Flatbutton و یه Container که توی بخش های قبل با این ویجت ها آشنا شدیم مثال زیر :

Main.dart

import 'package:flutter/material.dart';
void main() {
  MaterialApp(
    home: Home(),
  );
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('my first app'),
        centerTitle: true,
        backgroundColor: Colors.red[600],
      ),
      body: Row(
        children: <Widget>[
          Text('Hello Word'),
          FlatButton(
            onPressed: () {},
            color: Colors.amber,
            child: Text('click'),
          ),
          Container(
            color: Colors.cyan,
            padding: EdgeInsets.all(30),
            child: Text('inside container'),
          )
        ],
      ),

    );
  }
}

بعد از اجرا کد های بالا نتیجه رو توی تصویر زیر میبینیم

حالا خود ویجت Row چندتا ویژگی داره برای اینکه بتونیم این المنت ها رو چیدمانشون و تغییر بدیم فقط کافیه بریم به خط دستورات که childeren و نوشتیم

اولین ویژگی که میخوایم باهاش کار کنیم اسمش هست mainAxisAlignment مشخص میکنه که چیدمان و ساختار این ویجت ها به چه شکلی باشه به صورت زیر میتونیم متد های mainAxisAligment و ببنیم.

خب من میام از اولی که Center هست استفاده میکنم

 mainAxisAlignment:MainAxisAlignment.center

اجرا میکنم تا خروجی رو ببینیم توی تصویر زیر:

خب میبینیم که اومد و کل اون ویجت هایی که توی Row قرار داده بودیم و وسط چین کرد ودر وسط صفحه قرار گرفتن ویژگی دیگه ای که داره اسمش هست SpaceAround کد زیر

mainAxisAlignment:MainAxisAlignment.spaceAround

دوباره کدم رو اجرا میکنم تصویر زیر و میبینیم

میبینیم که اومد و چقدر زیبا بین ویجت هامون به یه مقدار مشخصی فاصله ایجاد کرد.

ویژگی spacebetween رو حالا بررسی میکنیم

  mainAxisAlignment:MainAxisAlignment.spaceBetween

این ویژگی اومد و بین المنت ها یه فاصله انداخت ولی دیگه به کنارها کاری نداره فرقش با متد SpaceAround  توی همین هست !

من ویژگی End وهمانتخاب کنم و ببینید

mainAxisAlignment:MainAxisAlignment.end

میبینید که همه ویجت های ما با متد End اومدن و سمت راست قرار گرفتن.


خب ویژگی بعدی که این Row ما داره crossAxisAlignment هست مثلا من الان از متد Start استفاده میکنم

 crossAxisAlignment: CrossAxisAlignment.start

این قسمت میاد و خود ویجت رو تغییر میده وقتی از Start استفاده کردیم توی تصویر بالا میبینیم که اومد و ویجت ها رو از بالا شروع کرد به چیدن حالا اگه از متد End استفاده کنم برعکس start میاد و ویجت ها رو از پایین مرتب میکنه تصویر زیر رو ببینید

 crossAxisAlignment: CrossAxisAlignment.end

متد بعدی اسمش هست stretch

 crossAxisAlignment: CrossAxisAlignment.stretch

وقتی از Stretch استفاده کردیم توی تصویر بالا میبینید که میاد و ویجت هامون و میکشه خب دوستان عزیز توی این بخش با ویجت Row آشنا شدیم که دیدم Row میاد ویجت های ما رو به صورت افقی قرار میده کنار هم دیگه که حالا بستگی به ui که میخواییم طراحی کنیم کاربرد داره مثلا اگه اپ فیلیمو رو دیده باشید با این رو میشه آیتم های ویدیو که داره رو پیاده کرد منتظر بخش های بعدی باشید خدا به همراهتون.

ویجت Container در فلاتر ( بخش 6 ) ❤️
کار با ویجت column در فلاتر ( بخش 8 ) ❤️
, , , , ,

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این قسمت نباید خالی باشد
این قسمت نباید خالی باشد
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

فهرست