Thứ Năm, 29 tháng 8, 2019

Tính tỉ lệ khi dùng GridView + CardView trong flutter

import 'package:flutter/material.dart';import 'package:flutter/cupertino.dart';
void main() {
  runApp(new MyApp());}

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter TabBar',      home: new Home(),      theme: new ThemeData(primaryColor: Colors.black),    );  }
}

class Home extends StatefulWidget {
  @override  _HomeState createState() => new _HomeState();}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  TabController tabController;
  @override  Widget build(BuildContext context) {
    tabController = new TabController(length: 2, vsync: this);
    var tabBarItem = new TabBar(
      tabs: [
        new Tab(
          icon: new Icon(Icons.list),        ),        new Tab(
          icon: new Icon(Icons.grid_on),        ),      ],      controller: tabController,      indicatorColor: Colors.white,    );
    var listItem = new ListView.builder(
      itemCount: 20,      itemBuilder: (BuildContext context, int index) {
        return new ListTile(
          title: new Card(
            elevation: 5.0,            child: new Container(
              alignment: Alignment.center,              //margin: new EdgeInsets.only(top: 10.0, bottom: 10.0),              child: new Text("ListItem $index"),            ),          ),          onTap: () {
            showDialog(
                barrierDismissible: false,                context: context,                child: new CupertinoAlertDialog(
                  title: new Column(
                    children: <Widget>[
                      new Text("ListView"),                      new Icon(
                        Icons.favorite,                        color: Colors.red,                      ),                    ],                  ),                  content: new Text("Selected Item $index"),                  actions: <Widget>[
                    new FlatButton(
                        onPressed: () {
                          Navigator.of(context).pop();                        },                        child: new Text("OK"))
                  ],                ));          },        );      },    );
    //////////////    final List<String> items = <String>[
      "Item 1",      "Item 2",      "Item 3",      "Item 4",      "Item 5",      "Item 6",    ];
    //calc    int crossAxisCount = 3; // số item mỗi hàng    double crossAxisSpacing = 4.0; //chiều ngang    double mainAxisSpacing = 4.0; //chiều dọc
    double widthScreen = MediaQuery.of(context).size.width; // độ rộng màn hình    double imageItemHeight = (widthScreen - 8.0) *
        1.4 /
        crossAxisCount; // chiều cao ảnh: cao/rộng=1.4    double titleHeight = 50.0; // chiều cao tiêu đề
    double cardViewDefaultPadding = 4.0 * 2; // trên và dưới
    double allContainerHeight =
        imageItemHeight + titleHeight + cardViewDefaultPadding;    double childAspectRatio; // tỉ lệ GridView
    Widget itemGridView() {
      return new GestureDetector(
        child: new Card(
          elevation: 5.0,          child: new Column(
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,                height: imageItemHeight,                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,                    image: AssetImage('images/demo.jpg'),                  ),                ),              ),              new Container(
                height: titleHeight,                //padding: EdgeInsets.only(top: 50.0, bottom: 90.0),                color: Colors.red,                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,                  children: <Widget>[
                    Text(
                      'TITLE',                      textAlign: TextAlign.center,                      style: TextStyle(
                        color: Colors.white,                      ),                    ),                  ],                ),              ),            ],          ),        ),        onTap: () {
          showDialog(
            barrierDismissible: false,            context: context,            child: new CupertinoAlertDialog(
              title: new Column(
                children: <Widget>[
                  new Text("GridView"),                  new Icon(
                    Icons.favorite,                    color: Colors.green,                  ),                ],              ),              content: new Text("Selected Item"),              //new Text("Selected Item $index"),              actions: <Widget>[
                new FlatButton(
                    onPressed: () {
                      Navigator.of(context).pop();                    },                    child: new Text("OK"))
              ],            ),          );        },      );    }

    Widget gridView2() {
      //Công thức tính tỉ lệ      childAspectRatio = ((MediaQuery.of(context).size.width -
                  crossAxisSpacing * (crossAxisCount - 1)) /
              crossAxisCount) /
          allContainerHeight;
      print('Tỷ lệ: $childAspectRatio');
      return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,          mainAxisSpacing: mainAxisSpacing,          crossAxisSpacing: crossAxisSpacing,          childAspectRatio: childAspectRatio, //0.569171235,        ),        itemCount: items.length,        itemBuilder: (context, index) {
          return GridTile(child: itemGridView());        },      );    }

    return new DefaultTabController(
      length: 2,      child: new Scaffold(
        backgroundColor: Colors.blueGrey,        appBar: new AppBar(
          title: new Text("Flutter TabBar"),          bottom: tabBarItem,        ),        body: new TabBarView(
          controller: tabController,          children: [
            listItem,            gridView2(),          ],        ),      ),    );  }
}

Không có nhận xét nào:

Đăng nhận xét