Flutter中PreferredSize小部件的作用是什么？

Question

我刚接触Flutter，发现有一些用于布局设计的小部件，比如SizedBox和Container。但是有一个小部件PreferredSize，我并不了解，也找不到任何关于它的例子。

那么，它与其他可以设置高度和宽度的小部件（如Container和SizedBox）有何不同呢？
能否给出一个例子呢？

- esthrim

Answer 1

https://api.flutter.dev/flutter/widgets/PreferredSize-class.html

具有 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"),
                )
            ),

        )
    );
  }
}

- Amit Prajapati

---

问题是，使用特定大小的SizedBox和使用preferredSize有什么区别？ - user3808307

理论上，它只会约束子元素的大小，如果子元素大小是无界的话。这就引出了问题：使用 PreferredSize 和 ConstrainedBox 有什么区别呢？没有人知道。 - Mateus Felipe

Answer 2

PreferredSize是一个自定义小部件，让您可以设计自己的应用程序栏，与Appbar相同的高度、宽度、高程和触感。

有时您想要为应用程序栏创建选项卡或更有效的设计，那么您可以使用PreferredSizeWidget为您的appBar创建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的好方法，我希望它能帮到你。

- Jay Mungara

Answer 3

如果您想创建自己的自定义偏好大小小部件，您只需要在小部件中实现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.
  }

}

- omzer

Answer 4

当您在 SliverAppBar() 中使用容器时，可以使用它。

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

- ElsayedDev

Answer 5

PreferredSize是一个包装PreferredSizeWidget的类，您可以使用它创建自定义的AppBar。

这是如何扩展PreferredSize类的方法：

class FooBar extends PreferredSize {
  final String data;
  FooBar(this.data);

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

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

这是如何使用它的：

Scaffold(
  appBar: FooBar('My App bar'),
)

- iDecode