Flutter - Container 组合类容器

最新推荐文章于 2024-06-05 11:45:54 发布

a136447572

最新推荐文章于 2024-06-05 11:45:54 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/a136447572/article/details/128284750

Flutter 专栏收录该内容

31 篇文章

订阅专栏

在这里插入图片描述
它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景

示例
在这里插入图片描述

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

class MyContainerState extends StatefulWidget {
  const MyContainerState({Key? key}) : super(key: key);

  @override
  State<MyContainerState> createState() => _MyState();
}

class _MyState extends State<MyContainerState> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("MyContainerState"),
      ),
      body: ConstrainedBox(
        constraints: const BoxConstraints.tightFor(width: double.infinity),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              constraints: const BoxConstraints.tightFor(width: double.infinity, height: 10),
              color: Colors.red,
            ),
            Container(
              constraints: const BoxConstraints.tightFor(width: double.infinity, height: 85),
              margin: const EdgeInsets.only(left: 15, right: 15, top: 10, bottom: 10),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(5),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black26,
                      offset: Offset(2, 2),
                      blurRadius: 3,
                    ),
                  ]),
              child: Row(
                children: <Widget>[
                  Expanded(
                    flex: 3,
                    child: Padding(
                        padding: const EdgeInsets.only(left : 10 ,right: 10,top: 8,bottom: 8),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Expanded(
                              flex: 10,
                              child: Padding(
                                  padding: const EdgeInsets.only(right: 0,top: 0,bottom:0),
                                  child: Text("中国工商业联合会第十三次全国代表大会开幕 李强代表中共中央国务院致贺词",
                                    maxLines: 2, // 最大行数
                                    overflow: TextOverflow.ellipsis,
                                      style:TextStyle( // 字体样式
                                        fontSize: 15.0 ,// 字体大小
                                        height:1.4 , // 行高系数  ,最后高度为  字体大小 * 行高系数
                                      )
                                  )
                              ),
                            ),
                            Spacer(
                              flex: 2,
                            ),
                            Expanded(
                              flex: 4,
                              child: Container(
                                constraints: const BoxConstraints.tightFor(width: double.infinity, height: double.infinity),
                                alignment: Alignment.centerLeft,
                                child: Row(
                                  children: <Widget>[
                                    Icon(Icons.access_time,size:13,color: Colors.grey,),
                                    Text("   2022-12-09",style: TextStyle(fontSize: 13,color: Colors.grey),)
                                  ],
                                ),
                              ),
                            ),
                          ],
                        )
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 10,top: 8,bottom: 8),
                      child: Image.network(
                        "https://i-blog.csdnimg.cn/blog_migrate/b98c7feebeb5115e991b7721ec073e9a.png",
                        width: double.infinity,
                        fit: BoxFit.fill,
                      )
                    ),
                  )
                ],

              ),
            ),
            Container(
              constraints: const BoxConstraints.tightFor(width: double.infinity, height: 10),
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}