dart服务器代码

    科技2022-07-12  126

    dart服务器代码

    Dart Code Viewer Flutter程序包 (Dart Code Viewer Flutter package)

    The dart_code_viewer package for Flutter allows you to easily show and copy dart code in your Flutter application.

    Flutter的dart_code_viewer包使您可以轻松地在Flutter应用程序中显示和复制dart代码。

    入门 (Getting Started)

    With the dart_code_viewer package, you can show Dart code in a Flutter application. The dart_code_viewer is well documented and has the same theming pattern that the Flutter framework has.

    使用dart_code_viewer软件包,您可以在Flutter应用程序中显示Dart代码。 dart_code_viewer有充分的文档证明,并具有与Flutter框架相同的主题模式。

    The code viewer can be used to display dart code. By default the DartCodeViewer gives you a theme based code view. This means that the code viewer has two different default theming , light and dark mode.

    代码查看器可用于显示Dart代码。 默认情况下, DartCodeViewer为您提供基于主题的代码视图。 这意味着代码查看器具有两种不同的默认主题设置:明暗模式。

    The code viewer requires a non-null data String as required input.

    代码查看器需要一个非null的data字符串作为必需的输入。

    The DartCodeViewer requires one of its ancestors to be a Material widget. This is because the code viewer uses the MediaQuery widget. Which is typically introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

    DartCodeViewer要求其祖先之一是“ Material小部件。 这是因为代码查看器使用MediaQuery小部件。 通常由应用程序小部件树顶部的MaterialApp或WidgetsApp小部件引入。

    To use dart_code_viewer first you must add the ‘dart_code_viewer’ package to your pubspec dependencies.

    要首先使用dart_code_viewer ,必须将dart_code_viewer包添加到pubspec依赖项中 。

    To import DartCodeViewer:

    导入DartCodeViewer:

    import ‘package:dart_code_viewer/dart_code_viewer.dart’;

    To use DartCodeViewer with the default DartCodeViewer:

    要将DartCodeViewer与默认DartCodeViewer一起使用:

    DartCodeViewer(r’’’void main() {runApp(MyApp());}‘’’),

    Note: ‘’’ is a handy dart pattern that lets you write multiple strings in different lines. This is really useful if you want to import your dart code as a String like the example above.

    注意: '''是方便的Dart模式,可让您在不同的行中写入多个字符串。 如果您想像上面的示例一样将dart代码作为字符串导入,这将非常有用。

    You can also customize the theming of the DartCodeViewer by using its parameters:

    您还可以使用DartCodeViewer的参数来自定义其主题:

    DartCodeViewer(r’’’void main() {runApp(MyApp());}‘’’,backgroundColor: GoogleFonts.robotoMono().copyWith(color: Colors.pink),),

    This will change the background color of the CodeViewer to Pink.

    这会将CodeViewer的背景色更改为Pink。

    You can use this Code viewer tool to choose the color for each different highlighted token style. On the left side you put your example code and on the right you can choose the colors you want the code viewer to display. Below is a table that shows you the difference between the code viewer tool and the dart code viewer parameter.

    您可以使用此代码查看器工具为每种不同的突出显示标记样式选择颜色。 您可以在左侧放置示例代码,而在右侧可以选择希望代码查看器显示的颜色。 下表显示了代码查看器工具和dart代码查看器参数之间的区别。

    Code Viewer Tool => Dart Code Viewer Parameter

    代码查看器工具=> Dart代码查看器参数

    background => backgroundColor

    背景=> backgroundColor

    plain text => baseStyle

    纯文本=> baseStyle

    Punctuation => punctuationStyle

    标点=>标点样式

    String, values => stringStyle

    字符串,值=> stringStyle

    Keywords, tags => keywordStyle

    关键字,标签=> keywordStyle

    Comment => commentStyle

    评论=> commentStyle

    Types => classStyle

    类型=> classStyle

    Numbers => numberStyle

    数字=> numberStyle

    You can use DartCodeViewer other constructor DartCodeViewer.textColor to change the color properties instead of the TextStyles. You can also set the TextStyle in case you don’t want to use the default textStyle RobotoMono. Here is an example on how you can use this constructor:

    您可以使用DartCodeViewer其他构造函数DartCodeViewer.textColor更改颜色属性,而不是TextStyles。 如果您不想使用默认的textStyle RobotoMono也可以设置TextStyle。 这是有关如何使用此构造函数的示例:

    DartCodeViewer.textColor(r’’’void main() {runApp(MyApp());}‘’’, textStyle: GoogleFonts.lato(), commentColor: Colors.grey, baseColor: Colors.pink,),

    In the case above we are using the text style lato and we are changing the default colors for comment and base color to grey and pink respectively.

    在上述情况下,我们使用文本样式lato并将注释的默认颜色和基础颜色分别更改为灰色和粉红色。

    If you are having a hard time figuring out how to choose the Color for this tool. There are a few default DartCodeViewers at your disposal. Here are the code viewers that are well known:

    如果您很难解决如何为该工具选择颜色。 您可以使用一些默认的DartCodeViewer。 以下是众所周知的代码查看器:

    - DartCodeViewer.light

    DartCodeViewer.light

    - DartCodeViewer.lightAlt

    DartCodeViewer.lightAlt

    - DartCodeViewer.dark

    DartCodeViewer.dark

    - DartCodeViewer.darkAlt

    DartCodeViewer.darkAlt

    - DartCodeViewer.designDark

    DartCodeViewer.designDark

    - DartCodeViewer.io17

    DartCodeViewer.io17

    - DartCodeViewer.io19

    DartCodeViewer.io19

    - DartCodeViewer.flutterInteract2019

    DartCodeViewer.flutterInteract2019

    Here is an example on how to use these themed code viewers.

    这是有关如何使用这些主题代码查看器的示例。

    DartCodeViewer.designDark(r’’’void main() {runApp(MyApp());}‘’’,),

    The DartCodeViewer can also be themed identical to how widgets in the material package get themed. You can theme the code viewer by having an ancestor of DartCodeViewerTheme. The dart code viewer theme describes the color, size, and text styles for the dart code viewer it is attached to.

    DartCodeViewer的主题也可以与物料包中的小部件的主题相同。 您可以通过拥有DartCodeViewerTheme的祖先作为代码查看器的主题。 Dart代码查看器主题描述了其所附的Dart代码查看器的颜色,大小和文本样式。

    Descendant widget obtains the current theme’s DartCodeViewerThemeData object using DartCodeViewerTheme.of(). When a widget uses DartCodeViewerTheme.of(), it is automatically rebuilt if the theme later changes.

    后代小部件使用DartCodeViewerTheme.of()获得当前主题的DartCodeViewerThemeData对象。 当小部件使用DartCodeViewerTheme.of() ,如果以后更改主题,它将自动重建。

    Using the DartCodeViewerThemeData returns the data from the closest DartCodeViewerTheme instances that encloses the given context. The default parameters are set within the DartCodeViewer.

    使用DartCodeViewerThemeData可以从包含给定上下文的最近DartCodeViewerTheme实例返回数据。 默认参数在DartCodeViewer中设置。

    DartCodeViewerThemeData holds the color, size, and text styles for a dart code viewer theme. Use this class to configure a DartCodeViewerThemeData widget. To obtain the current ambient dart code viewer theme, use DartCodeViewerTheme.of().

    DartCodeViewerThemeData保留Dart代码查看器主题的颜色,大小和文本样式。 使用此类可配置DartCodeViewerThemeData小部件。 要获取当前的环境dart代码查看器主题,请使用DartCodeViewerTheme.of() 。

    The simplest way to create a DartCodeThemeData is to use the copyWith on the one you get from DartCodeViewerTheme.of(), or create an entirely new one with DartCodeViewerThemeData.

    创建DartCodeThemeData的最简单方法是在从DartCodeViewerTheme.of()获得的副本上使用copyWith,或使用DartCodeViewerThemeData创建一个全新的DartCodeViewerThemeData 。

    Here is an example below:

    下面是一个示例:

    DartCodeViewerTheme( data: DartCodeViewerThemeData( backgroundColor: Colors.pink, copyButtonText: Text(‘Copiar’), ), child: DartCodeViewer.textColor(r’’’void main() {runApp(MyApp());}‘’’, textStyle: GoogleFonts.lato(), commentColor: Colors.grey, baseColor: Colors.pink,),

    结束语 (Closing remarks)

    The dart code viewer is based off the code viewer from the Flutter Gallery. Learn more about the dart code viewer package.

    Dart代码查看器基于Flutter Gallery中的代码查看器。 了解有关dart代码查看器软件包的更多信息。

    To learn more about Jose, visit his pages on GitHub, LinkedIn, YouTube, and Instagram.

    要了解有关Jose的更多信息,请访问 GitHub , LinkedIn , YouTube 和 Instagram上的页面 。

    翻译自: https://medium.com/swlh/dart-code-viewer-59e120a47166

    dart服务器代码

    相关资源:微信小程序源码-合集6.rar
    Processed: 0.012, SQL: 8