Flutter底部对齐按钮插件bottom_aligned_button的使用

Flutter底部对齐按钮插件bottom_aligned_button的使用

提供了BottomAlignedButton和DistancedWidgets小部件，帮助将按钮（或任何小部件）放置在屏幕底部。

使用

BottomAlignedButton

BottomAlignedButton将child放在顶部，button放在底部。如果child占用的高度超过BottomAlignedButton本身的高度，则button会被移动到创建列表的末尾，并且会与child一起滚动。

示例代码：

BottomAlignedButton(
  button: ElevatedButton(
    onPressed: () {},
    child: const Text('Sign In'),
  ),
  child: Column(
    children: [
      // 一些小部件，例如登录表单的文本框
    ],
  ),
)

DistancedWidgets

DistancedWidgets将top放在顶部，bottom放在底部。如果top占用的高度超过DistancedWidgets本身的高度，则bottom会被隐藏。

onBottomHide在每次RenderObject.performLayout之后被调用，当bottom不渲染时。onBottomShow在每次RenderObject.performLayout之后被调用，当bottom正在渲染时。

示例代码：

DistancedWidgets(
  top: Column(
    children: [
      // 一些小部件
    ]
  ),
  bottom: ElevatedButton(
    onPressed: () {},
    child: const Text('Sign In'),
  ),
  onBottomHide: () {},
  onBottomShow: () {},
)

完整示例代码

以下是一个完整的示例代码，展示了如何使用BottomAlignedButton来实现一个简单的登录页面。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '底部对齐按钮',
      home: MyHomePage(title: '底部对齐按钮'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> inputs = [];
  final input = const TextField(
    decoration: InputDecoration(
      label: Text('姓名/邮箱/电话/密码'),
    ),
  );

  [@override](/user/override)
  void initState() {
    super.initState();

    inputs.addAll([input, input, input]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(
          left: 8,
          right: 8,
          bottom: 70,
        ),
        child: BottomAlignedButton(
          button: ElevatedButton(
            onPressed: () {
              final messenger = ScaffoldMessenger.of(context);

              const message = SnackBar(
                content: Text('您已成功登录！'),
              );
              messenger.removeCurrentSnackBar();
              messenger.showSnackBar(message);
            },
            child: const Text('登录'),
          ),
          child: Column(
            children: inputs,
          ),
        ),
      ),
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            onPressed: () {
              setState(() {
                inputs.removeAt(inputs.length - 1);
              });
            },
            child: const Icon(Icons.remove),
          ),
          const SizedBox(height: 8),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                inputs.add(input);
              });
            },
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}