碼上快樂

相關內容    簡體    繁體

flutter常用組件總結

本文轉載自   查看原文   2020-12-16 23:28   411    flutter

一、 繼承StatelessWidget組件

import 'package:flutter/material.dart';

void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //TODO:implementbuild return Center( child: Text( "My name is maple", textDirection: TextDirection.ltr, ), ); } }

二、Text組件

import 'package:flutter/material.dart';

void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //TODO:implementbuild return Center( child: Text( "My name is maple", textDirection: TextDirection.ltr, style: TextStyle( fontSize: 40.0, //字體大小 fontWeight: FontWeight.bold, //字體粗細 color: Colors.yellow //字體顏色  ), ), ); } }

三、MaterialApp頂層組件

import 'package:flutter/material.dart';

void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { final routes = { '/': (BuildContext context) => new Home(), }; @override Widget build(BuildContext context) { //TODO:implementbuild return MaterialApp( title: "標題", //主題  theme: ThemeData(primarySwatch: Colors.red, brightness: Brightness.light), // 主頁 // home: Home(), // 路由  routes: routes); } } class Home extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Text( "My name is maple", textDirection: TextDirection.ltr, style: TextStyle( fontSize: 30.0, //字體大小 fontWeight: FontWeight.bold, //字體粗細 color: Colors.yellow //字體顏色  ), ), ); } }

四、Text，Container 組件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //TODO:implementbuild
    return MaterialApp(
      title: "標題",
      //主題
      theme: ThemeData(primarySwatch: Colors.red, brightness: Brightness.light),
      // 主頁
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter'),
            elevation: 30.0,
          ),
          body: Home()),
      //設置標題陰影 不需要的話值設置成 0.0
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      // Container類似於css的div
      child: Container(
        child: Text(
          "My name is maple and I like to eat",
          textAlign: TextAlign.center,
          //文本對齊方式
          overflow: TextOverflow.ellipsis,
          //文字超出屏幕之后的處理方式（clip 裁剪，fade 漸隱，ellipsis 省略號）
          textScaleFactor: 1.5,
          //字體顯示倍率
          textDirection: TextDirection.ltr,
          //文本方向（ltr 從左至右，rtl 從右至 左）
          maxLines: 2,
          //文字顯示最大行數
          style: TextStyle(
            fontSize: 25.0, //字體大小
            fontWeight: FontWeight.bold, //字體粗細
            color: Colors.red, //字體顏色
            fontStyle: FontStyle.italic, //文字樣式（italic 斜體，normal 正常體）
          ),
        ),
        //topCenter：頂部居中對齊
        // topLeft：頂部左對齊
        // topRight：頂部右對齊
        // center：水平垂直居中對齊
        // centerLeft：垂直居中水平居左對齊
        // centerRight：垂直居中水平居右對齊
        // bottomCenter 底部居中對齊
        // bottomLeft：底部居左對齊
        // bottomRight：底部居右對齊
        alignment: Alignment.topLeft,
        height: 300.0,
        width: 300.0,
        // 類似於css的盒模型
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.blue, width: 2.0), //邊框
          borderRadius: BorderRadius.all(
            //  Radius.circular(150),    //圓形
            Radius.circular(10), //圓角
          ),
        ),
        // padding 就是 Container 的內邊距，指 Container 邊緣與 Child 之間的距離
        // padding:EdgeInsets.all(20),
        padding: EdgeInsets.fromLTRB(10, 30, 5, 0),
        // margin 屬性是表示 Container 與外部其他 組件的距離
        margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
        // 讓 Container 容易進行一些旋轉之類的
        // transform: Matrix4.translationValues(100, 0, 0)
        transform: Matrix4.rotationZ(0.3)
        // transform: Matrix4.diagonal3Values(1.2, 1, 1)
      ),
    );
  }
}

五、Image組件

 

 

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

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      // 加載本地文件
      child: Image.asset(
        'images/p2620309098.jpg',
        // fit 屬性用來控制圖片的拉伸和擠壓，這都是根據父容器來 的。
        // BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。
        // BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
        // BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要 充滿整個容器，還不變形）。
        fit: BoxFit.cover,
        // 設置圖片的背景顏色，通常和 colorBlendMode 配合一起 使用，
        // 這樣可以是圖片顏色和背景色混合。
        // 上面的圖片就 是進行了顏色的混合，綠色背景和圖片紅色的混合
        color: Colors.red,
        colorBlendMode: BlendMode.colorDodge,
      ),
      height: 400,
      width: 400,
      decoration: BoxDecoration(color: Colors.yellow),
    ));
  }
}
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('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      //如果 child 為正方形時剪裁之后是圓形，如果 child 為矩形時，剪裁之后為橢圓形。
      child: ClipOval(
        child: Container(
          // 加載網絡文件
          child: Image.network(
            'https://img1.doubanio.com/view/photo/l/public/p2578828978.webp',
            // fit 屬性用來控制圖片的拉伸和擠壓，這都是根據父容器來 的。
            // BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。
            // BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
            // BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要 充滿整個容器，還不變形）。
            fit: BoxFit.cover,
            // 設置圖片的背景顏色，通常和 colorBlendMode 配合一起 使用，
            // 這樣可以是圖片顏色和背景色混合。
            // 上面的圖片就 是進行了顏色的混合，綠色背景和圖片紅色的混合
            color: Colors.red,
            colorBlendMode: BlendMode.colorDodge,
          ),
          height: 400,
          width: 400,
          decoration: BoxDecoration(color: Colors.yellow),
        ),
      ),
    );
  }
}

六、ListView列表組件

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

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        Container(
          child: Text(
            '曼達洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img1.doubanio.com/view/photo/m/public/p2620309098.webp"),
        Container(
          child: Text(
            '曼達洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img1.doubanio.com/view/photo/m/public/p2578828978.webp"),
        Container(
          child: Text(
            '曼達洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img1.doubanio.com/view/photo/m/public/p2621748239.webp"),
        Container(
          child: Text(
            '曼達洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img9.doubanio.com/view/photo/m/public/p2627557925.webp"),
        Container(
          child: Text(
            '曼達洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img9.doubanio.com/view/photo/m/public/p2624006816.webp"),
        Container(
          child: Text(
            '曼達洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
        Container(
          child: Text(
            '曼達洛人二',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),
        Image.network(
            "https://img2.doubanio.com/view/photo/m/public/p2627320552.webp"),
      ],
    );
  }
}
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('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 180,
      padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 250.0,
            color: Colors.red,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼達洛人')
              ],
            ),
          ),
          Container(
            width: 250.0,
            color: Colors.orange,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼達洛人')
              ],
            ),
          ),
          Container(
            width: 250.0,
            color: Colors.blue,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼達洛人')
              ],
            ),
          ),
          Container(
            width: 250.0,
            color: Colors.deepOrange,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼達洛人')
              ],
            ),
          ),
          Container(
            width: 250.0,
            color: Colors.deepPurpleAccent,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"),
                Text('曼達洛人')
              ],
            ),
          ),
        ],
      ),
    );
  }
}

七、動態ListView組件

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

class HomeContent extends StatelessWidget {
  List httpList = [
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp',
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp',
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp',
    'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp'
  ];

  //自定義方法
  List<Widget> _getData() {
    List<Widget> list = new List();
    httpList.forEach((http) {
      list.add(Container(
        height: 300,
        child: Image.network("$http"),
      ));
    });
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this._getData(),
    );
  }
}
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('Flutter')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  List listData = [
    {
      "title": '曼達洛人第1集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第2集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第3集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第4集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第5集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第6集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
  ];

  //自定義方法
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        // 分割線
        decoration: BoxDecoration(
            color: Colors.white,
            border:
                Border(bottom: BorderSide(width: 1, color: Colors.black12))),
        child: ListTile(
            leading:
                CircleAvatar(backgroundImage: NetworkImage(value["imageUrl"])),
            title: Text(value["title"]),
            subtitle: Text(value["type"])),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this._getListData(),
    );
  }
}

八、GridView組件（網格視圖）

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

class HomeContent extends StatelessWidget {
  List listData = [
    {
      "title": '曼達洛人第1集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第2集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第3集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第4集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第5集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
    {
      "title": '曼達洛人第6集',
      "type": '科幻',
      "imageUrl":
          'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp',
    },
  ];

  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(height: 10),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18),
            )
          ],
        ),
        decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(const Radius.circular(8.0)), //外圓角
            border: Border.all(
                color: Color.fromRGBO(111, 111, 111, 0.9), width: 2)),
        // height: 400,  //設置高度沒有反應
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //水平子 Widget 之間間距
      crossAxisSpacing: 10.0,
      //垂直子 Widget 之間間距
      mainAxisSpacing: 10.0,
      //一行的 Widget 數量
      padding: EdgeInsets.symmetric(horizontal:16),
        crossAxisCount: 2,
      //寬度和高度的比例
      childAspectRatio: 0.63,
      children: this._getListData(),
    );
  }
}

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Flutter 裁剪類組件 最全總結 Flutter——Switch組件（開關組件） Flutter——Container組件（容器組件） Flutter——Expanded組件（"可伸縮"組件） 【Flutter】可滾動組件之GridView flutter中的列表組件 【Flutter】可滾動組件之SingleChildScrollView flutter button RaisedButton組件 flutter中的按鈕組件 Flutter之ExpansionTile組件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM