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

问题描述

我是新手，我看到很少有用于布局设计的小部件，例如SizedBox和Container.有一个我不知道且找不到任何示例的 PreferredSize 小部件.与其他可以设置高度和宽度的小部件(例如容器和SizedBox)有什么不同?有人可以举个例子吗?

I'm new in flutter, and I see there are few widgets for the layout design such as SizedBox and Container.There is one widget which is PreferredSize Widget that I don't know and cannot find any example about it. What makes it different from other widgets such as container and SizedBox which can set height and width?.
Can someone give an example?

推荐答案

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

Sometimes you want to create tabs or more effective design for your appbar then you can create a customChild for your appBar with the help of PreferredSizeWidget.

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

For Ex : If you want to create a custom appbar with backgradient

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的好方法.希望对您有帮助.

This is the great way to use PreferredSizeWidget. I hope it helps.

这篇关于Flutter中PreferredSize小部件的用途是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！