📜  Flutter的中心小部件

📅  最后修改于: 2021-09-23 06:42:40             🧑  作者: Mango

中心小部件内置有flutter,它将其子小部件与屏幕上可用空间的中心对齐。如果widthFactorheightFactor属性设置为null并且尺寸受到约束,则此小部件的大小将尽可能大。如果尺寸不受约束并且widthFactorHeightFactor设置为null,则 Center 小部件采用其子小部件的大小。让我们借助示例来理解这一点。

构造函数:

Syntax:
Center({Key key, 
double widthFactor, 
double heightFactor, 
Widget child})

中心小部件的属性:

  • widthFactor:此属性采用双精度值作为参数,并将中心小部件的宽度设置为与子部件的宽度相同 宽度乘以这个系数。例如,如果它设置为 3.0,则中心小部件将占用其子小部件大小的三倍。
  • heightFactor:这个属性还接受一个精度值作为参数,它将中心小部件的高度设置为与孩子的高度乘以这个因子相同。
  • child:这个属性接受一个小部件作为参数,显示在屏幕上的中心小部件内。
  • 对齐:此属性采用AlignmentGeometry作为参数值,以确定子小部件将如何相对于中心小部件对齐。

例子:

主要的。dart文件。

Dart
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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        // heightFactor: 3,
        // widthFactor: 0.8,
        child: Container(
          color: Colors.green,
          child: Text(
            'Center Widget',
            textScaleFactor: 3,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}


输出:

执行上述代码后,输出如下所示:

居中对齐小部件

如果属性定义如下:

heightFactor: 3,





可以观察到以下设计更改:

居中顶部对齐小部件

如果属性定义如下:

widthFactor: 1,





可以观察到以下设计更改:

如果属性定义如下:

heightFactor: 3,
widthFactor: 0.8,





可以观察到以下设计更改:

解释:

  • 创建中心小部件,其子部件为Container
  • 如果需要,设置heightFactor
  • 如果需要,设置widthFactor
想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!