首页 > 解决方案 > iphone上的Flutter FloatingActionButton对齐有/没有缺口

问题描述

如代码中所写,我有三个浮动操作按钮。

不知何故,按钮对齐的行为与带有/不带有缺口的iPhone 不同。我想将按钮与按钮对齐。Search this area

在 Android 手机上测试它正确对齐。

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.topCenter,
        child: Padding(
          padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).padding.top + 100, 0, 0),
          child: RaisedButton(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0)),
              child: Text('Search this area'),
              onPressed: () {}),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Padding(
            padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).padding.top + 120, 0, 0),
            child: Column(
              children: [
                Container(
                  width: 40.0,
                  height: 40.0,
                  child: FloatingActionButton(
                    child: Icon(Icons.my_location),
                    onPressed: () {},
                    heroTag: null,
                    backgroundColor: Colors.red,
                  ),
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                  width: 40.0,
                  height: 40.0,
                  child: FloatingActionButton(
                    child: Icon(Icons.map),
                    onPressed: () {},
                    heroTag: null,
                    backgroundColor: Colors.green,
                  ),
                ),
              ],
            ),
          ),
          FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.add),
            heroTag: null,
          ),
        ],
      ),
    );
  }
}

截图

没有缺口

无缺口

带缺口

带缺口

标签: iosflutter

解决方案


这个问题注册到官方flutter仓库https://github.com/flutter/flutter/issues/71956


推荐阅读