Question

我是新手，我发现很少有用于布局设计的小部件，例如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

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

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

Answer 3

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

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

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

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

4 个答案: