betacode

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

View more Tutorials:

1- Flutter Center

Center - это виджет, который помещает свой единственный дочерний виджет в свой центр.
Center и Align довольно похожи. У них есть только один дочерний виджет, но Align позволяет изменять положение дочернего виджета внутри него.
Center Constructor
const Center(
    {Key key,
    double widthFactor,
    double heightFactor,
    Widget child}
)
Если параметр widthFactor не указан, то ширина Center будет самой большой, в противном случае ширина Center равна ширине child, умноженной на widthFactor. Параметр heightFactor также имеет такое же поведение для высоты Center. Поэтому по умолчанию размер Center будет максимальным.
Center(
    child: Icon (
        Icons.place,
        size: 128,
        color: Colors.redAccent
    )
)
main.dart (ex1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @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 Center Example")
      ),
      body: Center(
          child: Icon (
              Icons.place,
              size: 128,
              color: Colors.redAccent
          )
      ),
    );
  }
}

2- child

child - это единственный дочерний виджет Center. В некоторых случаях он может использоваться в качестве объекта Row, Column или Stack для содержания нескольких других виджетов.
Widget child
Например, если child является объектом Row, он может содержать несколько своих дочерних виджетов в строке.
child (ex1)
Center (
    child: Row (
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon (
             Icons.place,
             size: 48,
             color: Colors.redAccent
         ),
         Text("My Location!")
       ],
    )
)
Например, если child является объектом Column, он может содержать несколько свох дочерних виджетов в столбце.
child (ex2)
Center (
    child: Column (
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon (
             Icons.place,
             size: 48,
             color: Colors.redAccent
         ),
         Text("My Location!")
       ],
    )
)

3- widthFactor

widthFactor - это коэффициент, который используется для расчета ширины Center на основе ширины child (его дочернего элемента). Если widthFactor не null, то ширина Center  равна ширине child, умноженной на этот коэффициент.
Если widthFactor не указан, то ширина Center будет как можно большой.
double widthFactor
Пример:
widthFactor (ex1)
Center(
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    ),
    widthFactor: 2.0
)

4- heightFactor

heightFactor - это коэффициент, который используется для расчета высоты Center  на основе высоты child (своего дочернего элемента). Если heightFactor не null, то высота Center равна высоте child, умноженной на этот коэффициент.
Если heightFactor не указан, то высота Center будет максимально возможной.
double heightFactor
Например:
heightFactor (ex1)
Center(
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    ),
    heightFactor: 3.0
)

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.