在flutter中PreferredSize小部件有什么用？

Question

我是 flutter 的新手，我发现布局设计的小部件很少，例如 SizedBox 和 Container。有一个小部件是PreferredSize小部件，我不知道，也找不到任何关于它的示例。它与其他可以设置高度和宽度的小部件（例如容器和 SizedBox）有何不同？
有人可以举个例子吗？

Answer 1

https://flutter.dev/docs/catalog/samples/PreferredSize

示例：https : //flutter.dev/docs/catalog/samples/app-bar-bottom

任何带有 的小部件PreferredSize都可以出现在 的底部AppBar。

您可以使用PreferredSize来设置您的AppBar尺寸。

class MyApp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Example',
        home: Scaffold(
            appBar: PreferredSize(
                preferredSize: Size.fromHeight(100.0), // here the desired height
                child: AppBar(
                  centerTitle: true,
                  title: Text("Example"),
                )
            ),

        )
    );
  }
}

Answer 2

如果您想创建自己的自定义首选尺寸小部件，您所需要做的就是PreferredSizeWidget在小部件中实现接口。

例子：

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget implements PreferredSizeWidget {

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return Container(); // Your custom widget implementation.
  }

}

Answer 3

首选大小是一个自定义小部件，可让您为您设计与 Appbar 具有相同高度、宽度、高度和感觉的自定义应用栏。

有时您想为您的应用栏创建选项卡或更有效的设计，然后您可以在 PreferredSizeWidget 的帮助下为您的应用栏创建 customChild。

例如：如果你想创建一个带有背景渐变的自定义应用栏

import 'package:flutter/material.dart';

Color gradientStartColor = Color(0xff11998e);
Color gradientEndColor = Color(0xff0575E6);

class PreferredSizeApp extends StatefulWidget {
  @override
  _PreferredSizeAppState createState() => _PreferredSizeAppState();
}

class _PreferredSizeAppState extends State<PreferredSizeApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
          preferredSize: const Size(double.infinity, kToolbarHeight),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: gradientStartColor,
                  offset: Offset(1.0, 6.0),
                  blurRadius: 10.0,
                ),
                BoxShadow(
                  color: gradientEndColor,
                  offset: Offset(1.0, 6.0),
                  blurRadius: 10.0,
                ),
              ],
              gradient: LinearGradient(
                  colors: [
                    gradientStartColor,
                    gradientEndColor
                  ],
                  begin: const FractionalOffset(0.2, 0.2),
                  end: const FractionalOffset(1.0, 1.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
            child: Center(child: Text("Appbar With Gradient",style: TextStyle(color: Colors.white,fontSize: 25.0),)),
          ),
      ),
    );
  }
}

这是使用 PreferredSizeWidget 的好方法。我希望它有帮助。

Answer 4

当你使用容器时你可以使用它SliverAppBar()

SliverAppBar(
  pinned: true,
  snap: true,
  floating: true,
  bottom: PreferredSize(
    child: Container(),
    preferredSize: Size.fromHeight(50),
  )),