Flutter黄金比例布局插件golden_ratio的使用

在Flutter开发中，有时我们需要创建一个符合黄金比例（Golden Ratio）的布局来提升界面的美观度。golden_ratio 是一个非常方便的插件，可以帮助我们轻松实现这一目标。

安装插件

首先，在项目的 pubspec.yaml 文件中添加 golden_ratio 插件：

dependencies:
  golden_ratio: ^0.1.0

然后运行以下命令以安装插件：

flutter pub get

使用示例

下面是一个完整的示例，展示如何使用 golden_ratio 插件来创建一个基于黄金比例的布局。

示例代码

import 'package:flutter/material.dart';
import 'package:golden_ratio/golden_ratio.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoldenRatioPage(),
    );
  }
}

class GoldenRatioPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('黄金比例布局示例'),
      ),
      body: Center(
        child: GoldenContainer(
          width: 400,
          height: 400,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              GoldenChild(
                widthFactor: 1,
                heightFactor: 0.618, // 黄金比例约等于0.618
                color: Colors.blue,
                child: Center(child: Text('上部分')),
              ),
              GoldenChild(
                widthFactor: 1,
                heightFactor: 0.382, // 剩余部分
                color: Colors.green,
                child: Center(child: Text('下部分')),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码说明

1. 导入插件：

   import 'package:golden_ratio/golden_ratio.dart';

   导入 golden_ratio 插件以便使用其中的功能。

2. 创建主应用：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: GoldenRatioPage(),
       );
     }
   }

3. 使用 GoldenContainer 和 GoldenChild：

   • GoldenContainer 是一个容器，用于包裹基于黄金比例的子组件。
   • GoldenChild 是具体的子组件，通过 widthFactor 和 heightFactor 来定义其大小。

   class GoldenRatioPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('黄金比例布局示例'),
         ),
         body: Center(
           child: GoldenContainer(
             width: 400,
             height: 400,
             child: Column(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 GoldenChild(
                   widthFactor: 1,
                   heightFactor: 0.618, // 黄金比例约等于0.618
                   color: Colors.blue,
                   child: Center(child: Text('上部分')),
                 ),
                 GoldenChild(
                   widthFactor: 1,
                   heightFactor: 0.382, // 剩余部分
                   color: Colors.green,
                   child: Center(child: Text('下部分')),
                 ),
               ],
             ),
           ),
         ),
       );
     }
   }