关于程序员:Flutter-SDK-自带的-10-个最有用的-Widget

38次阅读

共计 6945 个字符，预计需要花费 18 分钟才能阅读完成。

Flutter SDK 自带的 10 个最有用的 Widget

前言

在这里我将分享最有用的 Flutter SDK 自带 Widget

原文 https://medium.com/@kaushikid…

1. Slider

咱们应用滑块小部件来更改值。因而，须要将值存储在变量中。这个小部件有一个滑块类，它须要 onChanged ()函数。当咱们扭转滑块地位时，这个函数将被调用。

示例代码

  Slider(value: _value.toDouble(),
      min: 1.0,
      max: 20.0,
      divisions: 10,
      activeColor: AppColors.mainColor,
      inactiveColor: Colors.grey.shade400,
      label: 'Set volume value',
      onChanged: (double newValue) {setState(() {_value = newValue.round();
        });
      },
      semanticFormatterCallback: (double newValue) {return '${newValue.round()} dollars';
      })),

2. Range Slider

它是一个高度可定制的组件，能够从一系列值中抉择一个值。它能够从一组间断的或离散的值中进行抉择。

示例代码

  RangeSlider(
    values: _currentRangeValues,
    min: 0,
    max: 100,
    activeColor: AppColors.mainColor,
    inactiveColor: Colors.grey.shade400,
    divisions: 10,
    labels: RangeLabels(_currentRangeValues.start.round().toString(),
      _currentRangeValues.end.round().toString(),
    ),
    onChanged: (RangeValues values) {setState(() {_currentRangeValues = values;});
    },

3. Single Chip

芯片是一个 Material 设计小部件，内置 Flutter。它能够简略地形容为一个蕴含图标和文本 (通常是背景中的圆角矩形) 的紧凑元素。它能够有很多用处，比方它能够简略地用作一个按钮，用 CircleAvatar 和文本示意用户，或者在博客文章中应用主题标签等等。

示例代码

  Chip(
    padding:
        const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
    avatar: const CircleAvatar(
      backgroundColor: AppColors.mainColor,
      child: Text("D"),
    ),
    label: const Text("Dev"),
    onDeleted: () {},
  ),

4. Multiple Chip

咱们能够应用小部件芯片(过滤，显示多个芯片，抉择或删除芯片，等等)。让咱们看看这个例子。

示例代码

GridView.count(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    crossAxisCount: 3,
    childAspectRatio: 4,
    crossAxisSpacing: 5.0,
    mainAxisSpacing: 5.0,
    children: List.generate(nameList.length, (index) {
      return Chip(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        avatar: CircleAvatar(
          backgroundColor: AppColors.mainColor,
          child: Text(nameList[index].substring(0, 1)),
        ),
        label: Text(nameList[index]),
        onDeleted: () {setState(() {nameList.removeAt(index);
          });
        },
      );
    })),

5. Spacer

Spacer 创立一个可调节的空间隔，可用于调整 Flex 容器 (如 Row 或 Column) 中小部件之间的间距。Spacer 小部件将占用所有可用空间，因而设置 Flex。在蕴含到 MainAxisAlign 的距离的 flex 容器上进行 mainAxisAlign。

示例代码

  const Spacer(),
  Container(width: MediaQuery.of(context).size.width / 1,
    height: 100,
    color: AppColors.mainColor,
  ),
  const Spacer(),
  Container(width: MediaQuery.of(context).size.width / 1,
    height: 100,
    color: AppColors.mainColor,
  ),
  const Spacer(),
  Container(width: MediaQuery.of(context).size.width / 1,
    height: 100,
    color: AppColors.mainColor,
  ),
  const Spacer(),

6. Floating Action Button & BottomAppBar

让咱们容易做到这一点！

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          snap: false,
          pinned: true, // it will pinned the app bar on top
          floating: false,
          flexibleSpace: const FlexibleSpaceBar(
            centerTitle: false,
            title: Text("Awesome Sliver AppBar",
                style: TextStyle(
                  color: AppColors.whiteColor,
                  fontSize: 15.0,
                )),
            // background: ,
            // Here you can use any image or gif in background
          ),
          expandedHeight: 230,// fix the expanded height of the app bar
          backgroundColor: AppColors.mainColor, // backgroundcolor of the expanded appbar and normal appbar (for both)
          leading: IconButton(icon: const Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ),
          actions: <Widget>[
            IconButton(icon: const Icon(Icons.notifications_active),
              tooltip: 'Comment Icon',
              onPressed: () {},
            ),
            IconButton(icon: const Icon(Icons.chat),
              tooltip: 'Setting Icon',
              onPressed: () {},
            ),
          ],
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate((context, index) => Padding(padding: const EdgeInsets.all(15.0),
              child: Container(height: MediaQuery.of(context).size.height / 5,
                width: MediaQuery.of(context).size.width / 1,
                decoration: BoxDecoration(
                    color: AppColors.cyanColor,
                    borderRadius: BorderRadius.circular(30)),
              ),
            ),
            childCount: 8,
          ),
        )
      ],
    ));
  }

6. Material Banner

  • banner 容器的形态是矩形的，它扩大了残缺的小部件。
  • 这个容器有一个前导图标、文本和操作按钮。
  • 一个 banner 能够蕴含两个文本按钮，右边是遣散操作按钮，左边是确认操作按钮。
  • Material banner 小部件是在 2.5.0 版本中引入的，因而要应用这个小部件，咱们须要最新版本。

示例代码

MaterialBanner(content: const Text('Your account has been deleted.'),
  leading: const CircleAvatar(child: Icon(Icons.account_box),
  ),
  actions: <Widget>[
    TextButton(child: const Text('UNDO'),
      onPressed: () {// Perform some action.},
    ),
    TextButton(child: const Text('DISMISS'),
      onPressed: () {// Perform some action.},
    ),
  ],
),

7. CheckboxListTile

CheckboxListTile 是一个内置的小部件。咱们能够说它是 CheckBox 和 ListTile 的组合。它的属性，例如 value、activeColor 和 checkColor，与 CheckBox 小部件类似，title、subtitle、contentPadd 等与 ListTile 小部件类似。咱们能够点击 CheckBoxListTile 上的任何中央来 Google 这个复选框。

  CheckboxListTile(
    value: isChecked,
    onChanged: (bool? newValue) {setState(() {isChecked = newValue;});
    },
    title: const Text("Checkbox List Tile"),
    activeColor: Colors.orange,
    checkColor: Colors.white,
    tileColor: Colors.black12,
    subtitle: const Text('This is a subtitle'),
    controlAffinity: ListTileControlAffinity.leading,
    tristate: true,
  )

8. Table

表小部件用于在表布局中显示项。不须要应用行和列来创立表。如果有多个行具备雷同的列宽，那么 Table 小部件是正确的办法。

  Table(
    textDirection: TextDirection.rtl,
    defaultVerticalAlignment: TableCellVerticalAlignment.middle,
    border:
        TableBorder.all(width: 2.0, color: AppColors.blackColor),
    // ignore: prefer_const_literals_to_create_immutables
    children: [
      const TableRow(
          decoration: BoxDecoration(color: AppColors.mainColor,),
          children: [
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.middle,
              child: Padding(padding: EdgeInsets.all(8.0),
                child: Text(
                  "Name",
                  style: TextStyle(color: AppColors.whiteColor),
                  textScaleFactor: 1.1,
                ),
              ),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.middle,
              child: Padding(padding: EdgeInsets.all(8.0),
                child: Text(
                  "Number",
                  style: TextStyle(color: AppColors.whiteColor),
                  textScaleFactor: 1.1,
                ),
              ),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.middle,
              child: Padding(padding: EdgeInsets.all(8.0),
                child: Text(
                  "Grade",
                  style: TextStyle(color: AppColors.whiteColor),
                  textScaleFactor: 1.1,
                ),
              ),
            ),
          ]),
      ...List.generate(
          7,
          (index) => const TableRow(children: [
                TableCell(
                  verticalAlignment:
                      TableCellVerticalAlignment.middle,
                  child: Padding(padding: EdgeInsets.all(8.0),
                    child: Text(
                      "Name",
                      style: TextStyle(
                          fontSize: 14,
                          color: AppColors.blackColor),
                      textScaleFactor: 1,
                    ),
                  ),
                ),
                TableCell(
                  verticalAlignment:
                      TableCellVerticalAlignment.middle,
                  child: Padding(padding: EdgeInsets.all(8.0),
                    child: Text(
                      "Number",
                      style: TextStyle(
                          fontSize: 14,
                          color: AppColors.blackColor),
                      textScaleFactor: 1,
                    ),
                  ),
                ),
                TableCell(
                  verticalAlignment:
                      TableCellVerticalAlignment.middle,
                  child: Padding(padding: EdgeInsets.all(8.0),
                    child: Text(
                      "Grade",
                      style: TextStyle(
                          fontSize: 14,
                          color: AppColors.blackColor),
                      textScaleFactor: 1,
                    ),
                  ),
                ),
              ]))
    ],
  ),

9. Grid Tile

Flutter 中的 GridTile 是无状态小部件的一个子类，它是一个可滚动的瓦片网格。

Center(
  child: ClipRRect(borderRadius: BorderRadius.circular(10),
    child: SizedBox(height: MediaQuery.of(context).size.height / 3,
      width: MediaQuery.of(context).size.width / 2,
      child: GridTile(
        // header: const GridTileBar(
        //   backgroundColor: Colors.blueGrey,
        //   title: Text(
        //     "Product Title",
        //     textAlign: TextAlign.center,
        //   ),
        // ),
        child: GestureDetector(onTap: () {},
            child: Container(color: Colors.black12,)),
        footer: GridTileBar(
          backgroundColor: Colors.blueGrey,
          leading: IconButton(icon: const Icon(Icons.favorite),
            color: Colors.white,
            onPressed: () {},
          ),
          title: const Text(
            "Title",
            textAlign: TextAlign.center,
          ),
          trailing: IconButton(
            icon: const Icon(Icons.shopping_cart,),
            onPressed: () {},
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
),

10. Selectable Text

SelectableText 小部件显示具备单个款式的文本字符串。依据布局束缚，字符串能够跨多行显示，也能够全副显示在同一行上。

SelectableText('This is selectable Text',
  style: const TextStyle(fontSize: 22),
  onSelectionChanged: (selection, cause) {},),

残缺源代码 Https://github.com/kaushikikumari/medium_article_11

© 猫哥

  • 微信 ducafecat
  • blog https://wiki.ducafecat.tech

本文由 mdnice 多平台公布

正文完
程序员
发表至： 程序员
2022-10-22
 0
记一次高校生的华为面试经历
AjaxGetPost代码实例参数解析
关于程序员:Git进阶系列-5-Rebase-vs-Merge
关于程序员:Spring核心功能和执行流程源码分析上