本头条核心宗旨

欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本文核心要点

使用无状态小部件我相信很多人都在使用，而且很多项目也在使用，今天就分享个大家。

DEMO

main.dart文件介绍

import 'package:flutter/material.dart';void main() {  runApp(MaterialApp(    home: MyApp(),    // Define the theme, set the primary swatch    theme: ThemeData(primarySwatch: Colors.green),  ));}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    // Declare some constants    final double myTextSize = 30.0;    final double myIconSize = 40.0;    final TextStyle myTextStyle =        TextStyle(color: Colors.grey, fontSize: myTextSize);    var column = Column(      // Makes the cards stretch in horizontal axis      crossAxisAlignment: CrossAxisAlignment.stretch,      children: [        // Setup the card        MyCard(            // Setup the text            title: Text(              "Favorite",              style: myTextStyle,            ),            // Setup the icon            icon:                Icon(Icons.favorite, size: myIconSize, color: Colors.red)),        MyCard(            title: Text(              "Alarm",              style: myTextStyle,            ),            icon: Icon(Icons.alarm, size: myIconSize, color: Colors.blue)),        MyCard(            title: Text(              "Airport Shuttle",              style: myTextStyle,            ),            icon: Icon(Icons.airport_shuttle,                size: myIconSize, color: Colors.amber)),        MyCard(            title: Text(              "Done",              style: myTextStyle,            ),            icon: Icon(Icons.done, size: myIconSize, color: Colors.green)),      ],    );    return Scaffold(      appBar: AppBar(        title: Text("Stateless Widget"),      ),      body: Container(        // Sets the padding in the main container        padding: const EdgeInsets.only(bottom: 2.0),        child: Center(          child: SingleChildScrollView(child: column),        ),      ),    );    ;  }}// Create a reusable stateless widgetclass MyCard extends StatelessWidget {  final Widget icon;  final Widget title;  // Constructor. {} here denote that they are optional values i.e you can use as: MyCard()  MyCard({this.title, this.icon});  @override  Widget build(BuildContext context) {    return Container(      padding: const EdgeInsets.only(bottom: 1.0),      child: Card(        child: Container(          padding: const EdgeInsets.all(20.0),          child: Column(            children: [this.title, this.icon],          ),        ),      ),    );  }}

谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

閱讀更多 技術剛剛好 的文章

關鍵字: 收藏 部件 Android