پرش به محتوا

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

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

[restrict]

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

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

[/restrict]

[restrict]

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

mainAxisAlignment:MainAxisAlignment.spaceAround

[/restrict]

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

[restrict]

[/restrict]

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

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

  mainAxisAlignment:MainAxisAlignment.spaceBetween

[restrict]

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

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

[/restrict]

mainAxisAlignment:MainAxisAlignment.end

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

[restrict]


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

 crossAxisAlignment: CrossAxisAlignment.start

[/restrict]

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

 crossAxisAlignment: CrossAxisAlignment.end

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

 crossAxisAlignment: CrossAxisAlignment.stretch

[restrict]

[/restrict]

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

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

نشانی ایمیل شما منتشر نخواهد شد.