【flutter】篇5：认识Layout

最新推荐文章于 2023-06-01 17:36:28 发布

LCQ_CG

最新推荐文章于 2023-06-01 17:36:28 发布

阅读量307

点赞数

分类专栏： flutter 文章标签： flutter android

本文链接：https://blog.csdn.net/LCQ_CG/article/details/126875445

版权

flutter 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

Layous in Flutter

container:container是用来定制化它的子widget的，当你想添加padding,margin,border,backgroundcolor,可以用container
layout widgets可以决定它的子widget的水平和垂直的位置等属性,如center这种
一个flutter app就是一个widget,大多数widget都有build()方法，在build方法中返回widget可以呈现这个widget
Row和Column是基本的垂直和水平的layout，基本意味着可塑性强。Row的进阶版本是ListTIle,可以轻松的加上头标和尾标。Column的进阶版本是ListView,如果呈现的内容过长，可以用这个组件
使用本地asset需要更改下pubspec.yaml文件

flutter:
  uses-material-design: true
  assets:
    - images/pic1.jpg
    - images/pic2.jpg
    - images/pic3.jpg

widget可以赋值给变量，可以把碎片化的UI赋值给变量，这样能减少复杂度。就像函数式编程里的函数一样

const

const 变量会在编译时被赋值，
final 变量会在运行时被赋值
看下面这个代码：

Padding(edgeInsets:EdgeInsets.all(8) )

这段代码是声明了一个padding，它的一个属性是edgeInsets,该属性的属性值是一个对象EdgeInsets。ok?
如果说我要在代码中用100次这段代码，那么就会生成100个这样的对象（冗余…
所以说，用下面的代码：

Padding(edgeInsets:const EdgeInsets.all(8) )

用上const constructors，其他的地方再声明这个同样的类，就会reuse!!!
----------------------------------------分割线--------------------------------------------
类中如果要用const变量，就要加上static
如果把一个类的构造方法赋值给一个const变量，那么这个构造方法就是const构造
如果赋值给var或者final，那么就是new构造

Common layout widgets

详细的文档介绍（写博客估计也记不住
layout widget可以分为标准的widget来自widget library,和特制的widget来自Material library

Container可以添加paddging,marger,改变背景颜色，只有有个孩子
GrideView：可以呈现出grid的效果

class Mygride extends StatelessWidget {
  const Mygride({Key? key}) : super(key: key);
  List<Container> _buildImages(int count ) => List.generate(count, (index) => Container(child: Image.asset('images/$index.jpg')) );
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
    padding: const EdgeInsets.all(4),
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    children: _buildImages(4),
    );
  }
}

ListView：当内容过多可以自动滚动
可以通过再类中定义方法来定制自己的UI，该方法中返回的就是UI组件。如何渲染到屏幕上呢，需要在类中的render方法进行返回

Widget _buildList(){
    return ListView(
      children: [
        _tile('loper', 'licq',Icons.theaters),
        
      ],
    );
  }
  ListTile _tile(String title,String subtitle,IconData icon){
    return ListTile(
      title: Text(
        title,
        style: const TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 20,
        ),
      ),
      subtitle: Text(subtitle),
      leading: Icon(
        icon,
        color: Colors.blue[500],
      ),

    );
  }

Stack:用来覆盖在另一个widget上面，children列表中，index越大，越在上面
有一个疑问，为什么把height210注释掉之后，card就会跑到顶部，但是加上之后就会在中间

 Widget _buildCard(){
    return SizedBox(
      height: 210,
      child: Card(
        child: Column(
          children: [
            ListTile(
              title: const Text(
                'loper',
                style: const TextStyle(fontWeight: FontWeight.w500),
              ),
              subtitle: const Text('My city,CA 99984'),
              leading: Icon(
                Icons.restaurant_menu,
                color: Colors.blue[500],
              ),
            ),
            const Divider(),
            ListTile(
              title: const Text(
                '(408) 555-1212',
                style: TextStyle(fontWeight: FontWeight.w500),
              ),
              leading: Icon(
                Icons.contact_phone,
                color: Colors.blue[500],
              ),
            ),
            ListTile(
              title: const Text('costa@example.com'),
              leading: Icon(
                Icons.contact_mail,
                color: Colors.blue[500],
              ),
            ),
          ],
        ),
      ),
    );
  }