Question

是否有一种方法可以向Column动态添加底部填充，以便FAB永远不会掩盖它？

例如，FAB覆盖了该文本。

我用50添加了Container(child: Padding(padding: EdgeInsets.all(50.0)),)的填充量，因此不再覆盖，现在看起来像这样：

我的问题是否有一种方法可以根据FAB的高度动态设置此值？就我而言，FAB是一个按钮，但FAB可以是任何高度的任何小部件。所以我想避免使用50.0常量。

这是演示中使用的所有代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: View(),
    );
  }
}

class View extends StatelessWidget {
  final paragraphText = 'Example of a paragraph of text.' * 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            MaterialButton(onPressed: (){}, child: Text('Button example'),),
            Text(paragraphText),
            Container(child: Padding(padding: EdgeInsets.all(50.0)),)
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以执行以下操作：

为工厂小部件分配GlobalKey。
在框架加载后等待。
使用GlobalKey和RenderBox获取fab小部件的大小。
声明一个变量以存储填充。
在填充已更新的情况下致电setState。

```

    class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: 'Flutter Demo',
              home: View(),
            );
          }
        }

        class View extends StatefulWidget {
          @override
          ViewState createState() {
            return new ViewState();
          }
        }

        class ViewState extends State<View> {
          final paragraphText = 'Example of a paragraph of text.' * 100;

          GlobalKey _keyFab = GlobalKey();
          double padding = 0.0;

          _onLayoutDone(_) {
            RenderBox renderObject = _keyFab.currentContext.findRenderObject();
            setState(() {
              padding = renderObject.size.height;
            });
            print("padding: $padding");
          }

          @override
          void initState() {
            WidgetsBinding.instance.addPostFrameCallback(_onLayoutDone);
            super.initState();
          }

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: new AppBar(),
              floatingActionButton: FloatingActionButton(
                key: _keyFab,
                onPressed: () {},
                child: Icon(Icons.add),
              ),
              body: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    MaterialButton(
                      onPressed: () {},
                      child: Text('Button example'),
                    ),
                    Text(paragraphText),
                    Container(
                      child: Padding(padding: EdgeInsets.all(padding)),
                    )
                  ],
                ),
              ),
            );
          }
        }

动态设置填充小部件，以便FAB不覆盖“列”

1 个答案: