关键词：Flutter目录结构介绍、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件、Container组件、Text组件

Flutter入口文件、入口方法

lib目录有一个main.dart文件作为入口文件

最简单的写法是

void main(){
    runApp(MyApp());
}

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

main方法是dart的入口方法，runApp方法是flutter的入口方法，上述的MyApp是自定义的一个组件

import 'package:flutter/material.dart';

void main() {
  runApp(new Center(
    child: new Text(
      '你好Flutter',
      textDirection:TextDirection.ltr,
    )
  ));
}

直接选择运行后手机显示。如果因为text里面的文件报错，删除即可

报红按大R，R是指重新编译；r是重新加载改变

组件

怎么将组件抽离成一个单独的组件

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
    child: Text(
      '你好Flutter 111',
      textDirection:TextDirection.ltr,

    )
  );
  }
}

text的类型内容

加入不同的text属性（注意：所有size后缀的属性都为double类型）

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
    child: Text(
      '你好Flutter 111',
      textDirection:TextDirection.ltr,


      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow
        // color: Color.fromRGBO(244, 233, 214, 0.5),
      ),
    )
  );
  }
}

MaterialApp、Scaffold装饰

将内容抽象成组件，再在MaterialApp中定义不同部分的内容

home
body

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text('Flutter Demo')
      ),
      body: HomeContext(),
      )
    );
  }
}

class HomeContext extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Center(
    child: Text(
      '你好Flutter 111',
      textDirection:TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow
        // color: Color.fromRGBO(244, 233, 214, 0.5),
      ),
    )
  );
  }
}

自动注释显示

不太了解时可以Ctrl鼠标移动至对应位置查看属性包括的可选内容

基本结构

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("flutter demo")
        ),
        body: Center(
          child: Text('xxx'),
        )

      )
    );
  }
}

Container组件

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("flutter demo")
        ),
        body: HomeContent()
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Container(
        child: Text('我是一个文本'),
      )
    );
  }
}

新加入片段如下：

27行表示Container即是一个类，里面包含各种方法

另附解决奇怪下划线问题

将一些实体前加上const，在一些类内加入key构造函数即可

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: const Text("flutter demo"),
        ),
        body: const HomeContent()
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  const HomeContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child:Container(
        height: 300.0,
        width: 100.0,
        decoration: BoxDecoration(
          color: Colors.yellow,//背景颜色
          border: Border.all(//边框颜色·
            color: Colors.blue,
            width: 2.0
          )
        ),
        child: const Text(
          '我是一个文本我是一个文本我是一个文本',
          textAlign: TextAlign.center,//文字向右对齐
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          textScaleFactor: 1.2,
          style: TextStyle(
            fontSize: 16.0,
            color: Colors.red,
            // color:Color.fromARGB(a, r, g, b)
            fontWeight: FontWeight.w800,
            fontStyle: FontStyle.italic
          )
        ),
      )
    );
  }
}

修饰Container

alignment

Text组件

TextStyle参数

decoration:文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）
decorationColor：文字装饰线颜色
decorationStyle：文字装饰线风格([dashed,dotted]虚线，double两根线，soild一根实线，wavy波浪线）
wordSpacing：单词间隙（如果是负值，会让单词变得更紧凑）

margin ：表示Container与外部其他组件的距离，EdgeInsets.all(20.0)
padding ： Container内边距，指Container边缘与Child之间的距离 padding:EdgeInsets.all(10.0)

样例代码

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: const Text("flutter demo"),
        ),
        body: const HomeContent()
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  const HomeContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child:Container(
        height: 300.0,
        width: 100.0,
        decoration: BoxDecoration(
          color: Colors.yellow,//背景颜色
          border: Border.all(//边框颜色·
            color: Colors.blue,
            width: 2.0
          ),
          borderRadius: const BorderRadius.all(
            Radius.circular(8),
          )
        ),

        // padding: const EdgeInsets.all(20),\
        padding: const EdgeInsets.fromLTRB(10,30,5,0),
        margin: const EdgeInsets.fromLTRB(10, 20, 5, 0),

//旋转相关
        // transform: Matrix4.translationValues(10.0, 0, 0),
        transform:Matrix4.rotationZ(0.5),//绕着z轴旋转，+为顺时针旋转，负为逆时针旋转





        child: const Text(
          '我是一个文本我是一个文本我是一个文本',
          textAlign: TextAlign.center,//文字向右对齐
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          textScaleFactor: 1.2,
          style: TextStyle(
            fontSize: 16.0,
            color: Colors.red,
            // color:Color.fromARGB(a, r, g, b)
            fontWeight: FontWeight.w800,
            fontStyle: FontStyle.italic,

            //Text
            decoration:TextDecoration.lineThrough,//删除线
            decorationColor: Colors.white,//颜色
            decorationStyle: TextDecorationStyle.dashed,//虚线


          )
        ),
      )
    );
  }
}

Dart & Flutter系列教程【6】

目录：