flutter组件

xwder 2022-03-30 17:23

710

收藏版权

分类专栏： Flutter移动开发文章标签： Flutter

文章目录

Flutter组件

Text

Text是显示文本的组件。

Text('Text组件',
    textAlign: TextAlign.left,
    overflow: TextOverflow.ellipsis,
    // overflow:TextOverflow.fade ,
    maxLines: 2,
    textScaleFactor: 1.8,
    style: TextStyle(
        fontSize: 16.0,
        color: Colors.red,
        // color:Color.fromARGB(a, r, g, b)
        fontWeight: FontWeight.w800,
        fontStyle: FontStyle.italic,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.white,
        decorationStyle: TextDecorationStyle.dashed,
        letterSpacing: 5.0
        )
)

参考： http://laomengit.com/flutter/widgets/Text.html

Center

Align和Center控件都是控制子控件位置的控件。
参考：http://laomengit.com/flutter/widgets/Align.html#align-2

Container

Container将会是我们以后最常用的控件之一，Container是单容器类控件，即只包含一个子控件。Container可以装饰和定位子控件，例如设置背景颜色、形状等。

Container(
    child: Text('Text组件'),
    height: 300.0,
    width: 300.0,
    decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.blue, width: 2.0),
        borderRadius: BorderRadius.all(
          //  Radius.circular(150),    //圆形
          Radius.circular(10),
        )),
    // padding:EdgeInsets.all(20),

    // padding:EdgeInsets.fromLTRB(10, 30, 5, 0)

    margin: EdgeInsets.fromLTRB(10, 30, 5, 0),

    // transform:Matrix4.translationValues(100,0,0)

    // transform:Matrix4.rotationZ(0.3)

    // transform:Matrix4.diagonal3Values(1.2, 1, 1)

    alignment: Alignment.bottomLeft,
)

参考：http://laomengit.com/flutter/widgets/Container.html

Image

图片组件是Flutter基础组件之一，和文本组件一样必不可少。

child: Image.network(
    "https://www.itying.com/themes/itying/images/ionic4.png",
    // alignment: Alignment.bottomRight,
    // color: Colors.blue,
    // colorBlendMode: BlendMode.screen,
    // fit:BoxFit.cover,
    // repeat:ImageRepeat.repeat
),

DecorationImage(
    image:NetworkImage("https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png"),
    fit: BoxFit.cover
)

Image.asset('images/a.jpeg',
    fit: BoxFit.cover,
),

圆形图片的两种实现方式：
xxx

参考：http://laomengit.com/flutter/widgets/Image.html

ListView

ListView是我们最常用的组件之一，用于展示大量数据的列表。

//方式一：
ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[

          ListTile(
              leading:Image.network("https://www.itying.com/images/flutter/1.png"),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
            ListTile(
              leading:Image.network("https://www.itying.com/images/flutter/2.png"),
              title: Text('保监局50天开32罚单 “断供”违规资金为房市降温'),
              subtitle: Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降温"),
          ),
          ListTile(
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
              trailing:Image.network("https://www.itying.com/images/flutter/2.png")
          )
      ],
)

//方式二：
class HomeContent extends StatelessWidget {  

  //自定义方法
  Widget _getListData(context,index){
        return ListTile(           
            title: Text(listData[index]["title"]),
            leading:Image.network(listData[index]["imageUrl"]),          
            subtitle:Text(listData[index]["author"])
        );
  }

  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView.builder(
        itemCount:listData.length,
        itemBuilder:this._getListData
    );
  }
}

参考：http://laomengit.com/flutter/widgets/ListView.html

ListTile

ListTile是遵循Material Design 规范且固定高度的组件，让开发者快速的构建精美的布局，通常用于ListView的子控件，当然也可以单独使用。

ListTile(           
    title: Text(listData[index]["title"]),
    leading:Image.network(listData[index]["imageUrl"]),          
    subtitle:Text(listData[index]["author"])
)

ListTile(
    title: Text('华北黄淮高温雨今起强势登场'),
    subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
    trailing:Image.network("https://www.itying.com/images/flutter/2.png")
)

参考：http://laomengit.com/flutter/widgets/ListTile.html

GridView

GridView是一个可滚动的，2D数组控件。
列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过ListView 来定义
列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下
分类：
1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表（网格布局）

// 方式一
class LayoutDemo extends StatelessWidget {  
  List<Widget> _getListData() {
      List<Widget> list = [];
      for (var i = 0; i < 20; i++) {
        list.add(Container(
          alignment: Alignment.center,
          child: Text(
            '这是第$i条数据',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          color: Colors.blue,        
          // height: 400,  //设置高度没有反应
        ));
      }
      return list;
  }

  @override
  Widget build(BuildContext context) {    
    return GridView.count(
        crossAxisSpacing:20.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 20.0,    //垂直子 Widget 之间间距
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,  //一行的 Widget 数量
        childAspectRatio:0.7,  //宽度和高度的比例
        children: this._getListData(),
    );
  }
}
// 方式二
class LayoutDemo extends StatelessWidget {  
  Widget _getListData (context,index) {
        return Container(            
            child:Column(
                children: <Widget>[
                  Image.network(listData[index]['imageUrl']),
                  SizedBox(height: 12),
                  Text(
                    listData[index]['title'],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20
                    ),
                  )
                ],
            ),
            decoration: BoxDecoration(
              border: Border.all(
                color:Color.fromRGBO(233, 233,233, 0.9),
                width: 1
              )
            ),
            // height: 400,  //设置高度没有反应
          );
  }

  @override
  Widget build(BuildContext context) {    
    return GridView.builder(
        //注意
        gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
          mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距          
          crossAxisCount: 2,  //一行的 Widget 数量
        ),
        itemCount: listData.length,
        itemBuilder:this._getListData,
    );
  }
}

参考：http://laomengit.com/flutter/widgets/GridView.html

Padding

Padding提供设置内边距的组件。我们可以用Padding 组件处理容器与子元素直接的间距。

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1.7,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/1.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/2.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/3.png',
                fit: BoxFit.cover),
          )
        ],
    ));
  }
}

参考：http://laomengit.com/flutter/widgets/Padding.html

Row

Row 水平布局组件

import 'package:flutter/material.dart';

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

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

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      width: 400.0,
      color: Colors.pink,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start, //用的比较少
        children: <Widget>[
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.home, color: Colors.orange),
          IconContainer(Icons.select_all, color: Colors.red),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  //定义属性的时候在类型后面加一个？ 表示把当前属性定义成可空类型属性
  Color? color = Colors.red;
  double? size = 32.0;
  IconData icon;

  IconContainer(this.icon, {this.color, this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child:
          Center(child: Icon(this.icon, size: this.size, color: Colors.white)),
    );
  }
}

参考：http://laomengit.com/flutter/widgets/Column.html

Column

Column 垂直布局组件。

import 'package:flutter/material.dart';

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

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

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      width: 400.0,
      color: Colors.pink,
      child: Column(    
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.end,   
        children: <Widget>[
          IconContainer(Icons.search,color: Colors.blue),
          IconContainer(Icons.home,color: Colors.orange),
          IconContainer(Icons.select_all,color: Colors.red),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget{
  //定义属性的时候在类型后面加一个？ 表示把当前属性定义成可空类型属性  
  Color? color=Colors.red;
  double? size=32.0;
  IconData icon;
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {  
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white)
      ),
    );
  }
}

参考：http://laomengit.com/flutter/widgets/Column.html

Expanded

Expanded、Flexible和Spacer都是具有权重属性的组件，可以控制Row、Column、Flex的子控件如何布局的控件。

import 'package:flutter/material.dart';

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

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

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(         
        children: <Widget>[
          Expanded(
            flex: 1,
            child: IconContainer(Icons.search,color: Colors.blue)
          ),
           Expanded(
            flex: 2,
            child: IconContainer(Icons.home,color: Colors.orange),  
          ),
           Expanded(
            flex: 1,
            child: IconContainer(Icons.select_all,color: Colors.red),  
          ),

        ],    
    );
  }
}

class IconContainer extends StatelessWidget{
 //定义属性的时候在类型后面加一个？ 表示把当前属性定义成可空类型属性  
  Color? color=Colors.red;
  double? size=32.0;
  IconData icon;
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {   
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white)
      ),
    );
  }
}

参考：http://laomengit.com/flutter/widgets/Flexible.html#expanded

Stack

Stack组件可以将子组件叠加显示，根据子组件的顺利依次向上叠加。

import 'package:flutter/material.dart';

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

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

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:  Container(
            height: 400,
            width: 300,
            color: Colors.red,
            child: Stack(
              // alignment: Alignment.center,
              children: <Widget>[
                Positioned(
                //  left: 10,
                  child: Icon(Icons.home,size: 40,color: Colors.white),
                ),
                Positioned(
                 bottom: 0,
                 left: 100,
                  child: Icon(Icons.search,size: 30,color: Colors.white),
                ),
                Positioned(
                  right: 0,
                  child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
                )
              ],
            ),
      ),
    );
  }
}

参考： http://laomengit.com/flutter/widgets/Stack.html

AspectRatio

AspectRatio 的作用是根据设置调整子元素child 的宽高比。
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽
度和比率决定的，类似于BoxFit 中的contain，按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先
适应布局限制条件，而忽略所设置的比率。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 200,
      child: AspectRatio(
        aspectRatio: 2.0/1.0,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

参考：http://laomengit.com/flutter/widgets/ConstrainedBox.html#aspectratio

Card

Card 是卡片组件块，内容可以由大多数类型的Widget 构成，Card 具有圆角和阴影，这让它
看起来有立体感。

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

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

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

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(
                  "https://www.itying.com/images/flutter/2.png",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: ClipOval(
                  child: Image.network(
                      "https://www.itying.com/images/flutter/2.png",
                      fit: BoxFit.cover,
                      height: 60,
                      width: 60),
                ),
                title: Text("xxxx"),
                subtitle: Text("xxxxxxx"),
              )
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(
                  "https://www.itying.com/images/flutter/3.png",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://www.itying.com/images/flutter/3.png')),
                title: Text("xxxxxxxx"),
                subtitle: Text("xxxxxxxxxx"),
              )
            ],
          ),
        )
      ],
    );
  }
}

参考：http://laomengit.com/flutter/widgets/Card.html

ElevatedButton

ElevatedButton(
    child: Text('女装'),
    onPressed: () {},
);

参考：http://laomengit.com/flutter/widgets/Button.html

Wrap

Wrap 可以实现流布局，单行的Wrap 跟Row 表现几乎一致，单列的Wrap 则跟Row 表
现几乎一致。但Row 与Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空
间不足时，则向crossAxis 上去扩展显示。

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('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      // direction: Axis.vertical,
      // alignment:WrapAlignment.spaceEvenly,
      // runAlignment: WrapAlignment.center,
      children: <Widget>[
        MyButton("第1集"),
        MyButton("第2集"),
        MyButton("第3集"),
        MyButton("第4集"),
        MyButton("第5集"),
        MyButton("第6集"),
        MyButton("第7集"),
        MyButton("第8集"),
        MyButton("第9集"),
        MyButton("第10集"),
        MyButton("第11集"),
        MyButton("第3集"),
        MyButton("第4集"),
        MyButton("第5集"),
        MyButton("第6集"),
        MyButton("第7集"),
        MyButton("第8集"),
        MyButton("第9集"),
        MyButton("第10集"),
        MyButton("第11集"),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;
  const MyButton(this.text, {Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // Flutter 2.x以后新增了一些按钮组件  可以使用ElevatedButton替代RaisedButton，也可以继续使用RaisedButton
    return ElevatedButton(child: Text(this.text), onPressed: () {});
  }
}

参考：http://laomengit.com/flutter/widgets/Wrap.html

SizedBox

SizedBox是具有固定宽高的组件，直接指定具体的宽高。

Column(
  children: <Widget>[
    Container(height: 30,),
    SizedBox(height: 10,),
    Container(height: 30,),
  ],
)

参考：http://laomengit.com/flutter/widgets/ConstrainedBox.html#sizedbox