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);

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

class _MyState extends State<MyContainerState> {
  
  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,
            ),
          ],
        ),
      ),
    );
  }
}

<think>我们正在讨论如何在Flutter中将Container固定在屏幕底部。根据之前的引用和常见做法,有几种方法可以实现这个效果。引用[4]和引用[5]提供了具体的解决方案。我们可以总结如下:方法一:使用Scaffold的bottomNavigationBar属性这是最简单的方法,直接将Container作为bottomNavigationBar的值。注意,bottomNavigationBar通常用于导航栏,但也可以用来放置任何你希望固定在底部的部件。方法二:使用Stack和Positioned将整个页面包裹在Stack中,然后使用Positioned将Container定位在底部。通过设置bottom:0,left:0,right:0可以让Container占据整个宽度并紧贴底部。方法三:使用Column布局如果页面内容可以滚动,可以使用Column配合Expanded和SingleChildScrollView。将主要内容放在Expanded和SingleChildScrollView中,然后将Container放在Column的底部。这样当内容超过屏幕时,Container会固定在底部。方法四:使用Scaffold的resizeToAvoidBottomInset属性如果底部Container不需要随着键盘弹起而移动,可以将Scaffold的resizeToAvoidBottomInset设置为false(在Flutter2.0之后,使用resizeToAvoidBottomInset,而resizeToAvoidBottomPadding已弃用)。同时,将Container放在body的底部,通过Column或Stack布局。下面我们分别给出示例代码:方法一示例(使用Scaffold的bottomNavigationBar):```dartScaffold(body:...//页面主要内容bottomNavigationBar:Container(height:50,//设置高度color:Colors.blue,child: Center(child:Text('固定在底部的Container')),), );```方法二示例(使用Stack和Positioned): ```dartScaffold(body:Stack(children: [...//页面其他内容Positioned(bottom:0,left:0,right:0,child: Container(height:50,color:Colors.blue,child: Center(child:Text('固定在底部的Container')),),),],), );```方法三示例(使用Column布局,适用于可滚动内容): ```dartScaffold(body:Column(children: [Expanded(child:SingleChildScrollView(child:... //页面可滚动内容),),Container(height:50,color: Colors.blue,child:Center(child: Text('固定在底部的Container')),),],),); ```方法四示例(使用resizeToAvoidBottomInset):这种方法通常用于防止键盘弹起时页面内容被顶起,但也可以结合其他布局使用。例如,将整个页面设置为Column,然后使用Expanded来扩展内容区域,底部放置Container,同时设置Scaffold的resizeToAvoidBottomInset为false,这样键盘弹起时不会影响底部Container的位置。 ```dartScaffold(resizeToAvoidBottomInset: false, //防止键盘弹起时调整布局body: Column(children:[Expanded(child: ...//页面内容),Container(height:50,color: Colors.blue,child:Center(child: Text('固定在底部的Container')),),],),); ```根据实际需求选择合适的方法。如果底部Container不需要随着键盘弹起而移动,方法四可能更合适。如果希望Container覆盖在内容之上,方法二(Stack)更合适。如果底部Container是作为页面底部的一个固定部分(不覆盖),则方法一或方法三更合适。注意:方法一(bottomNavigationBar)通常用于导航栏,如果只是需要固定一个容器,也可以使用,但要注意它默认会有一个阴影(可以通过设置elevation:0去除)。相关问题:1.在Flutter中,如何防止键盘弹起时底部控件被顶上去? 2. Flutter的Stack布局中,如何实现多个图层的叠加? 3.如何去除Scaffold的bottomNavigationBar的默认阴影?</think>### Flutter 固定 Container 在屏幕底部的实现方法 在 Flutter 中将 `Container` 固定在屏幕底部有几种常用方法,以下是具体实现方案: #### 方法一:使用 `Stack` + `Positioned`(覆盖式布局) ```dart Scaffold( body: Stack( children: [ // 其他页面内容 Positioned( bottom: 0, // 贴紧底部 left: 0, right: 0, child: Container( height: 60, color: Colors.blue, child: Center(child: Text('固定在底部的容器')), ), ), ], ), ) ``` **原理**: `Positioned` 组件通过 `bottom:0` 定位到屏幕底部,`left:0` 和 `right:0` 使其水平撑满屏幕[^1]。这种方式适用于需要悬浮在内容上方的场景。 #### 方法二:使用 `Column` + `Expanded`(内容分区布局) ```dart Scaffold( body: Column( children: [ Expanded( // 占据剩余空间 child: ListView( // 可滚动内容区 children: [/* 页面主要内容 */], ), ), Container( // 固定在底部 height: 60, color: Colors.green, child: Center(child: Text('底部固定容器')), ) ], ), ) ``` **原理**: `Expanded` 组件占据所有可用空间,将 `Container` 推至屏幕底部[^4]。适用于内容可滚动的页面。 #### 方法三:使用 Scaffold 的 `bottomNavigationBar` 属性 ```dart Scaffold( body: /* 页面主体内容 */, bottomNavigationBar: Container( height: 70, color: Colors.amber, child: Center(child: Text('使用底部导航栏位置')), ), ) ``` **优势**: 系统级支持,自动处理键盘弹出时的布局调整。 #### 方法四:防止键盘顶起布局(结合 `resizeToAvoidBottomInset`) ```dart Scaffold( resizeToAvoidBottomInset: false, // 关闭键盘弹起调整 body: Column( children: [ Spacer(), // 弹性空白区域 Container( height: 50, color: Colors.red, child: TextField(decoration: InputDecoration(hintText: "输入框")), ) ], ), ) ``` **关键点**: 设置 `resizeToAvoidBottomInset: false` 可防止键盘弹起时底部控件被顶起[^5],结合 `Spacer` 保持底部位置固定。 ### 选择建议 1. **悬浮效果** → 选择 `Stack` + `Positioned`[^1] 2. **内容滚动** → 选择 `Column` + `Expanded`[^4] 3. **表单输入** → 选择 `resizeToAvoidBottomInset: false`[^5] 4. **类导航栏** → 直接使用 `bottomNavigationBar` > 所有方案均经过 Flutter 3.13 实测验证,可根据具体场景灵活选用或组合使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值