Руководство Flutter Spacer

View more Tutorials:

Pуководства Flutter

Flutter Spacer
flex

Сайт бесплатного изучения языков:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.

Facebook

1- Flutter Spacer

Spacer создает пустое регулируемое пространство, которое используется для регулировки расстояния между дочерними Widget в контейнере Flex (Flex container), такими как Column, Row и т. д.

Flutter Row

Flutter Column

Spacer Constructor


const Spacer(
    {Key key,
    int flex: 1}
)

Например:


Row (
  children: <Widget>[
    Text('Begin'),
    Spacer(), // Defaults to a flex of one.
    Text('Middle'),
    // Gives twice the space between Middle and End than Begin and Middle.
    Spacer(flex: 2),
    Text('End'),
  ],
)

main.dart (ex1)


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter Spacer Example")
        ),
        body: Center (
            child: Row(
              children: <Widget>[
                Text('Begin'),
                Spacer(), // Defaults to a flex of one.
                Text('Middle'),
                // Gives twice the space between Middle and End than Begin and Middle.
                Spacer(flex: 2),
                Text('End'),
              ],
            )
        )
    );
  }
}

2- flex

Свойство flex рассматривается как вес Spacer. Оно определяет, какое пространство будет выделено для Spacer. Это выделенное пространство пропорционально значению flex. Значение flex по умолчанию равно 1.


int flex: 1

flex (ex1)


Column (
  children: <Widget>[
    Icon(Icons.ac_unit, size: 32),
    Spacer(), // flex : 1 (Default)
    Icon(Icons.ac_unit, size: 36),
    Spacer(flex: 2),
    Icon(Icons.ac_unit, size: 48),
    Spacer(flex: 3),
    Icon(Icons.ac_unit, size: 24),
  ],
)

View more Tutorials:

Pуководства Flutter