YY_C

导航

 

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'),

          centerTitle: true,

         

        ),

        

        body: HomeContent(),       //内容

      ),

      

      theme: ThemeData(

        primarySwatch: Colors.yellow      //主题颜色

      ),

      color: Colors.blue,

    );

  }

 

}

 

class HomeContent extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return Center(

    child:  Container(   //Container 类似一个div

      child: Text('sss阿达大大大啊东方闪电时发生大幅度是发送到发送到司法所发生',

      textAlign: TextAlign.center, //文本对齐方式

      overflow: TextOverflow.ellipsis,//表示文本溢出后有....(换成其他就其他效果)

      maxLines: 1,

      textScaleFactor: 2,  //框内文本字体大小

      style: TextStyle(

        fontSize: 16.0,

        color: Colors.blue,  //框内文本颜色

        fontWeight: FontWeight.w100 ,//字体粗细

        fontStyle: FontStyle.italic,//字体倾斜(还有其他)

        decoration: TextDecoration.lineThrough , //一条横线穿过文本

        decorationColor: Colors.white , //穿过横线的颜色

        decorationStyle: TextDecorationStyle.dashed ,//穿过文本横线的形状,虚线、实线等等

        letterSpacing: 5.0   //字间距

      )

      ),

      height: 300.0,

      width: 300.0,

      decoration: BoxDecoration(

        color: Colors.yellow,  //div背景颜色

        border: Border.all(   //边框

          color: Colors.blue,  //边框颜色

          width: 2.0,

        ),

        borderRadius: BorderRadius.all(  //圆角边框,有点不同,看清楚

          //Radius.circular(150.0),圆形

          Radius.circular(10.0),

        )

 

        ),

        padding: EdgeInsets.all(20),//内边距

        //padding: EdgeInsets.fromLTRB(left, top, right, bottom),内边距的上下左右

        margin: EdgeInsets.all(20),//外边距,用法跟padding一样

        //transform: Matrix4.translationValues(1, 2, 3)//文字旋转

        //transform: Matrix4.rotationY(3), //div旋转

        alignment: Alignment.bottomCenter,// 框内文字位置

      )

 

    );

    

  }

  

}

 

posted on 2019-10-21 16:12  YY_C  阅读(386)  评论(0)    收藏  举报