Flutter常用组件

最新推荐文章于 2024-06-06 10:55:58 发布

Magic_小小阿昕

最新推荐文章于 2024-06-06 10:55:58 发布

阅读量310

点赞数

分类专栏：前端 knowledge 文章标签： flutter常用组件

本文链接：https://blog.youkuaiyun.com/Amo__/article/details/90205155

版权

前端 knowledge 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了一个简单的Flutter应用程序的搭建过程，包括使用void main()方法启动应用程序，定义StatelessWidget组件，以及如何设置基本的页面布局，如标题、主体内容、样式、定位、尺寸和背景装饰等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'package:flutter/material.dart';
// 写法1：
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        // 头部导航
        appBar: AppBar(
          title: Text('welcome to flutter')
        ),
        // 主内容
        body: Center(
          child: Container(
            child: new Text('Flutter', style:TextStyle(fontSize: 40.0)),
            alignment: Alignment.topLeft, //方便我们进行布局 bottomCenter bottomLeft bottomRight center centerLeft centerRight topLeft topCenter topRight
            width:500.0, // 设置宽
            height:400.0, // 设置高
            // color:Colors.lightBlue, // 设置背景颜色
            // padding:const EdgeInsets.all(20.0), //设置padding值全部
            padding:const EdgeInsets.fromLTRB(20.0,30.0,20.0,10.0), //分别设置padding值（左,上,右,下）内边距
            margin:const EdgeInsets.all(10.0), //分别设置margin值 设置不同的外边距,方法也是使用fromLTRB
            decoration: new BoxDecoration(  
               gradient:const LinearGradient( // 设置背景和边框
                colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple],
              ),
              border: Border.all(width:2.0,color:Colors.red), // 设置边框颜色
            ),
          )
        ),
      ),
    );
  } 

}