Flutter - Container 组合类容器

它是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://img-blog.csdnimg.cn/0b36117d179649f7ba49beedfa78cbc7.png",
                        width: double.infinity,
                        fit: BoxFit.fill,
                      )
                    ),
                  )
                ],

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