角材料-小部件

介绍

在Flutter中，Widget是我们所有UI界面的基础构造单元，它是指我们在应用程序中使用的各种可视元素（如按钮，文本框等）的基础构建块。 Flutter中的Widget分为两类：Stateful Widgets和Stateless Widgets。

我们知道角材料是一个优秀的前端设计框架，Flutter融合了角材料的设计思想，因此，角材料小部件是具有角色材料样式的，简单易用且强大的UI库。

在Flutter中，使用角材料小部件可以轻松增强您的应用程序的设计和样式，并使您的应用程序更具功能性和易用性。

特点

• 快速构建流畅，美观的应用程序设计
• 丰富的可定制化选项
• 易于使用和快速上手

常用小部件

MaterialApp

MaterialApp小部件定义了您的应用程序的基本初始样式，例如顶部栏的颜色和应用程序的主题颜色。建议每个Flutter应用程序都应该包含一个MaterialApp。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MyApp')),
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

Scaffold

Scaffold小部件是Flutter中的具有基本材料设计的标准页面布局，它包含应用程序的头部，尾部，主体和易于使用的滑动抽屉菜单等功能。

示例代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MyApp')),
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

Container

Container小部件是一个具有大小，边框，填充和装饰的构建器小部件，它可以被用来处理由单个UI元素组成的大多数情况。

示例代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MyApp')),
      body: Container(
        alignment: Alignment.center,
        color: Colors.blue,
        width: 150.0,
        height: 150.0,
        child: Text('Hello World!', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

AppBar

AppBar小部件是一个用于呈现应用程序头部的导航工具栏，其中包括应用程序图标，主题风格，菜单选项等。

示例代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyApp'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: null),
          IconButton(icon: Icon(Icons.share), onPressed: null),
        ],
      ),
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

Text

Text小部件用于显示文本内容，它可以设置字体大小，颜色，字体样式等。

示例代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MyApp')),
      body: Center(
        child: Text('Hello World!', style: TextStyle(fontSize: 24.0)),
      ),
    );
  }
}

总结

以上就是角材料小部件的介绍。使用角材料小部件可以快速构建流畅，美观的应用程序设计，丰富的可定制化选项，且易于使用和快速上手。这些小部件在Flutter的基础UI设计中非常常用，非常有利于我们的Flutter开发。