在颤振中使用 PreferredSize 小部件有啥用？

Posted 2023-02-23

【中文标题】在颤振中使用 PreferredSize 小部件有啥用？

【英文标题】：What is the use of PreferredSize widget in flutter?在颤振中使用 PreferredSize 小部件有什么用？

【发布时间】：2020-01-30 07:56:19

【问题描述】：

我是 Flutter 的新手，我看到布局设计的小部件很少，例如 SizedBox 和 Container。 有一个小部件是 PreferredSize 小部件，我不知道并且找不到任何关于它的示例。 它与可以设置高度和宽度的容器和 SizedBox 等其他小部件有何不同？ 谁能举个例子？

【参考方案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"),
                )
            ),

        )
    );
  

【讨论】：

问题是，使用一定尺寸的大小盒子和使用首选尺寸有什么区别

【参考方案2】：

Preferred Size 是一个自定义小部件，可让您为您设计自定义应用栏，其高度、宽度、高度和感觉与应用栏相似。

有时您想为您的 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 的好方法。希望对你有帮助。

【参考方案3】：

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

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

【参考方案4】：

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