美文网首页
Flutter组件属性速查

Flutter组件属性速查

作者: 吧啦吧 | 来源:发表于2020-08-07 15:46 被阅读0次

    ThemeData

    factory ThemeData({
      Brightness brightness, // 应用整体主题的亮度。用于按钮之类的小部件,以确定在不使用主色或强调色时选择什么颜色。
      MaterialColor primarySwatch,// 定义一个单一的颜色以及十个色度的色块。
      Color primaryColor, // 应用程序主要部分的背景颜色(toolbars、tab bars 等)
      Brightness primaryColorBrightness, // primaryColor的亮度。用于确定文本的颜色和放置在主颜色之上的图标(例如工具栏文本)。
      Color primaryColorLight, // primaryColor的浅色版
      Color primaryColorDark, // primaryColor的深色版
      Color accentColor, // 小部件的前景色(旋钮、文本、覆盖边缘效果等)。
      Brightness accentColorBrightness, // accentColor的亮度。
      Color canvasColor, //  MaterialType.canvas 的默认颜色
      Color scaffoldBackgroundColor, // Scaffold的默认颜色。典型Material应用程序或应用程序内页面的背景颜色。
      Color bottomAppBarColor, // BottomAppBar的默认颜色
      Color cardColor, // Card的颜色
      Color dividerColor, // Divider和PopupMenuDivider的颜色,也用于ListTile之间、DataTable的行之间等。
      Color highlightColor, // 选中在泼墨动画期间使用的突出显示颜色,或用于指示菜单中的项。
      Color splashColor,  // 墨水飞溅的颜色。InkWell
      InteractiveInkFeatureFactory splashFactory, // 定义由InkWell和InkResponse反应产生的墨溅的外观。
      Color selectedRowColor, // 用于突出显示选定行的颜色。
      Color unselectedWidgetColor, // 用于处于非活动(但已启用)状态的小部件的颜色。例如,未选中的复选框。通常与accentColor形成对比。也看到disabledColor。
      Color disabledColor, // 禁用状态下部件的颜色,无论其当前状态如何。例如,一个禁用的复选框(可以选中或未选中)。
      Color buttonColor, // RaisedButton按钮中使用的Material 的默认填充颜色。
      ButtonThemeData buttonTheme, // 定义按钮部件的默认配置,如RaisedButton和FlatButton。
      Color secondaryHeaderColor, // 选定行时PaginatedDataTable标题的颜色。
      Color textSelectionColor, // 文本框中文本选择的颜色,如TextField
      Color cursorColor, // 文本框中光标的颜色,如TextField
      Color textSelectionHandleColor,  // 用于调整当前选定的文本部分的句柄的颜色。
      Color backgroundColor, // 与主色形成对比的颜色,例如用作进度条的剩余部分。
      Color dialogBackgroundColor, // Dialog 元素的背景颜色
      Color indicatorColor, // 选项卡中选定的选项卡指示器的颜色。
      Color hintColor, // 用于提示文本或占位符文本的颜色,例如在TextField中。
      Color errorColor, // 用于输入验证错误的颜色,例如在TextField中
      Color toggleableActiveColor, // 用于突出显示Switch、Radio和Checkbox等可切换小部件的活动状态的颜色。
      String fontFamily, // 文本字体
      TextTheme textTheme, // 文本的颜色与卡片和画布的颜色形成对比。
      TextTheme primaryTextTheme, // 与primaryColor形成对比的文本主题
      TextTheme accentTextTheme, // 与accentColor形成对比的文本主题。
      InputDecorationTheme inputDecorationTheme, // 基于这个主题的 InputDecorator、TextField和TextFormField的默认InputDecoration值。
      IconThemeData iconTheme, // 与卡片和画布颜色形成对比的图标主题
      IconThemeData primaryIconTheme, // 与primaryColor形成对比的图标主题
      IconThemeData accentIconTheme, // 与accentColor形成对比的图标主题。
      SliderThemeData sliderTheme,  // 用于呈现Slider的颜色和形状
      TabBarTheme tabBarTheme, // 用于自定义选项卡栏指示器的大小、形状和颜色的主题。
      CardTheme cardTheme, // Card的颜色和样式
      ChipThemeData chipTheme, // Chip的颜色和样式
      TargetPlatform platform, 
      MaterialTapTargetSize materialTapTargetSize, // 配置某些Material部件的命中测试大小
      PageTransitionsTheme pageTransitionsTheme, 
      AppBarTheme appBarTheme, // 用于自定义Appbar的颜色、高度、亮度、iconTheme和textTheme的主题。
      BottomAppBarTheme bottomAppBarTheme, // 自定义BottomAppBar的形状、高度和颜色的主题。
      ColorScheme colorScheme, // 拥有13种颜色,可用于配置大多数组件的颜色。
      DialogTheme dialogTheme, // 自定义Dialog的主题形状
      Typography typography, // 用于配置TextTheme、primaryTextTheme和accentTextTheme的颜色和几何TextTheme值。
      CupertinoThemeData cupertinoOverrideTheme 
    })
    

    PageView

    PageView {  //可以实现动态加载加载页面,也就是懒加载的功能.
        Key key,
        this.scrollDirection = Axis.horizontal, //滚动方向,分为 Axis.horizontal 水平和 Axis.vertical垂直。我们上图就是水平滚动的.
        this.reverse = false, ////是否和阅读方向一样的滚动,比如中文的阅读习惯系从左往右
        PageController controller, //是PageController类的对象, 控制初始化显示第几个页面,还有占屏幕的范围。这个类对象有3个参数,分别是:1.initialPage 初始化第一次默认在第几页面。2.viewportFraction 占屏幕多少,1为占满整个屏幕.3.keepPage是否保存当前 Page 的状态,如果保存,下次回复对应保存的 page,initialPage被忽略,如果为 false 。下次总是从 initialPage 开始。
        this.physics, //滚动的方
        this.pageSnapping = true, //是否具有回弹效果
        this.onPageChanged, //页面切换回调
        @required IndexedWidgetBuilder itemBuilder, ////创建item,根据回调index返回不同页面
        int itemCount,  //item数量
        this.dragStartBehavior = DragStartBehavior.start,
        this.allowImplicitScrolling = false,
        List<Widget> children = const <Widget>[],    //页面(组件)列表,页面个数等于长度
        this.dragStartBehavior = DragStartBehavior.start,  //拖拽行为
       @required this.childrenDelegate,  //自定义模式接受一个子页面委托对象
      }
    

    MediaQuery

    使用

    //屏幕宽/高
    double ScreenWidth(BuildContext context) => MediaQuery.of(context).size.width;
    double ScreenHeight(BuildContext context) => MediaQuery.of(context).size.height;
    
    
    属性 描述
    size 一个包含宽度和高度的对象,单位是dp(乘以密度就是你设备的像素)
    devicePixelRatio 密度(像素比)
    textScaleFactor 每个逻辑像素的字体像素数
    platformBrightness 主机平台当前亮度模式
    viewInsets 完全被系统UI(通常是设备的键盘)遮挡的显示部分
    padding 我们通常取上边刘海高度和下边导航高度
    alwaysUse24HourFormat 格式化时间时是否使用24小时格式
    accessibleNavigation 用户是否使用TalkBack或VoiceOver等辅助功能服务与应用程序进行交互
    invertColors 设备是否反转平台的颜色
    disableAnimations 平台是否要求尽可能禁用或减少动画
    boldText 平台是否请求使用粗体字体重绘制文本

    ListTile

       const ListTile({
        Key key,
        this.leading,//左侧widget
        this.title,//标题
        this.subtitle,//副标题
        this.trailing,//右侧widget
        this.isThreeLine = false,//是否默认3行高度,subtitle不为空时才能使用
        this.dense,//设置为true后字体变小
        this.contentPadding,
        this.enabled = true,//能否被点击
        this.onTap,
        this.onLongPress,
        this.selected = false,//展示是否默认显示选中
        })
    
    #demo
    body: Container(
                child: Center(
                  child: ListView(
                    children: <Widget>[
                      Container(
                        color: Color(0xfff1f1f1),
                        child: ListTile(
                          title: Text("Title1"),
                          subtitle: Text(
                              " subtitleTitle1 "),
                          isThreeLine: true,
                          leading: CircleAvatar(
                            child: Icon(Icons.home),
                          ),
                          dense: true,
                          onTap: () => print("Title1"),
                        ),
                      ),
          
                      ListTile(
                        title: Text(
                            "Title2"),
                        leading: CircleAvatar(
                          child: Icon(Icons.add),
                        ),
                        onTap: () => print("Title2"),
                        enabled: false,
                      ),
                    ],
                  ),
                )
            ),
    

    相关文章

      网友评论

          本文标题:Flutter组件属性速查

          本文链接:https://www.haomeiwen.com/subject/ptgfdktx.html