您可以使用 FloatingActionButtonLocation 来放置浮动操作按钮在屏幕右下角,然后使用 Transform.scale 来缩小它。以下是示例代码:

floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: Transform.scale(
  scale: 0.8,
  child: FloatingActionButton(
    onPressed: () {
      // 按钮点击事件
    },
    child: Icon(Icons.add),
  ),
),

解释:

  • floatingActionButtonLocation: FloatingActionButtonLocation.endFloat:将浮动操作按钮定位到屏幕右下角。
  • Transform.scale(scale: 0.8, ...):使用 Transform.scale 组件,将 FloatingActionButton 缩小到原尺寸的 80%。

完整代码示例:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮定位和缩放'),
      ),
      body: Center(
        child: Text('内容区域'),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButton: Transform.scale(
        scale: 0.8,
        child: FloatingActionButton(
          onPressed: () {
            // 按钮点击事件
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}
Flutter 按钮定位和缩放:将按钮放置屏幕右下角并缩小

原文地址: https://www.cveoy.top/t/topic/ob8n 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录