PreferredSize小部件在颤振中的作用是什么？

Question

我是最新开发的，我发现布局设计中很少有小部件，比如SizedBox和Container。有一个小部件是PreferredSize widget，我不知道，也找不到关于它的任何例子。是什么使它不同于其他可以设置高度和宽度的小部件，如容器和SizedBox？

有人能举个例子吗？

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

        )
    );
  }
}

​

​

Answer 2

首选大小是一个定制小部件，允许您为您设计与Appbar相同的高度、宽度、高度和感觉类似的自定义应用程序条。

有时，您希望为应用程序创建选项卡或更有效的设计，然后可以在customChild的帮助下为appbar创建一个PreferredSizeWidget。

对于Ex :如果您想要创建带有反向渐变的自定义应用程序栏

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 3

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

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