Flutter中的Text组件和Button组件

timg.jpeg

1.Text文本

注释出经常使用的几个属性

const Text(
    this.data, {
    Key key,
    this.style,  //样式
    this.strutStyle,
    this.textAlign, //对其方式
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow, //超出的部分是否显示，枚举
    this.textScaleFactor,
    this.maxLines, //最大的显示的行数
    this.semanticsLabel,
    this.textWidthBasis,
  })

富文本 是 Text.rich() 参数是 TextSpan
经常使用：

1. TextSpan
2. WidgetSpan

image

import 'package:flutter/material.dart';


//main函数入口
main() => runApp(MyApp());


//MyApp类
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home:JCHomePage() ,
    );
  }

}


//创建一个JCHomePage的widget类
class JCHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("StatefulWidget的认知"),
      ),
      body: JCHomeContent(),
    );
  }
}


//创建一个 JCHomeContent继承StatefulWidget
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Column(
//       mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
         Text(
           "这个是一个文本Text，不负伟大时代，常使用的widget(Text文本,Button)",
           style: TextStyle(
             fontSize: 20,
             color: Colors.black38,
             backgroundColor: Colors.yellow,

           ),
//           maxLines: 1, //最大行数
           //超出的部分显示。。。
//           overflow: TextOverflow.ellipsis,
           // 所有内容都居中对齐
           textAlign: TextAlign.center,
         ),

        //富文本
        Text.rich(
          TextSpan(
           children: [
             TextSpan(
               text: "哈哈哈哈哈 ",
               style: TextStyle(
                   fontSize: 18,
                   color: Colors.blue
               ),

             ),

             TextSpan(
               text: "这是什么情况",
               style: TextStyle(
                   fontSize: 18,
                   color: Colors.green
               ),

             ),
             WidgetSpan(child: Icon(Icons.favorite, color: Colors.red,)),
             TextSpan(
               text: "哈哈的动态",
               style: TextStyle(
                   fontSize: 18,
                   color: Colors.red
               ),
             ),

           ]

         ),


        ),


      ],
    );
  }
}

2.按钮

在Flutter中 按钮的组件有很多种

1. FlatButton 按钮
2. RaisedButton按钮
3. OutlineButton 按钮
4. FloatingActionButton 悬浮按钮
   这几个按钮的区别其实就是样式不一样
5. 可以根据需要自己定义按钮

import 'package:flutter/material.dart';

//main函数入口
main() => runApp(MyApp());

//MyApp类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: JCHomePage(),
    );
  }
}

//创建一个JCHomePage的widget类
class JCHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  //Scaffold脚手架，类似控制器ViewController
    return Scaffold(
      appBar: AppBar(
        title: Text("StatefulWidget的认知"),
      ),
      body: JCHomeContent(),
    );
  }
}


//创建一个 JCHomeContent继承StatefulWidget
class JCHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        //RaisedButton按钮
        RaisedButton(
          textTheme:ButtonTextTheme.accent ,
            //设置按钮的子控件
            child: Text(
              "这是一个RaisedButton按钮",
              style: TextStyle(
//              color: Colors.green,
                  ),
            ),
            textColor: Colors.red,
            //按钮事件
            onPressed: () {
              print("点击RaisedButton按钮了");
            }),
        //FlatButton按钮
        FlatButton(
            onPressed: (){

            },
            child: Text(
                "FlatButton按钮"
            )
        ),

        OutlineButton(
          child: Text("OutlineButton"),
          onPressed: () {
            print("OutlineButton Click");
          },
        ),
      //自定义按钮I
     FlatButton(
      shape: RoundedRectangleBorder(
          //边框
          side: BorderSide(),
          //圆角
          borderRadius: BorderRadius.circular(5.0),
      ),
       onPressed: (){
        print("自定义按钮");
       },
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           Icon(Icons.favorite,color: Colors.green,),
           SizedBox(width: 5,),
           Text("这是一个自定义按钮",)
         ],
       ),
     ),

      ],
    );
  }
}

image

3.Button组件中的注意点

1. button默认有88 * 36 的值
2. button的内边距

我们在FlatButton或者RaisedButton的父类中可以看到一些端倪

image.png

我们在观察一下MaterialButton重写的build可以知道，button是从上下文context获取的数据

image.png

然后通过 ButtonTheme这个类，进去可以看到 button组件默认是有一个宽度和告诉的

image.png

//1.修改button默认的间距
//2.button默认有88 * 36 的值
//3.button的内边距
Column changButtonMargin() {
  return Column(
    children: <Widget>[
      //button默认上下是有一定的间距
      FlatButton(
        //按钮默认是有48 * 48px 的高度和宽度，不足48就会默认是48
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        child: Text("这是一个按钮"),
        color: Colors.red,
        onPressed: () {},
        //修改内边距
        padding: EdgeInsets.all(0),
      ),
    
 //通过ButtonTheme包裹 定义RaisedButton的宽度和高度
      ButtonTheme(
        //设置最小的宽度
        minWidth: 30,
        //设置高度
        height: 30,
        child: RaisedButton(color: Colors.red, onPressed: () {}),
      ),
    ],
  );
}

按钮的注意点