dart 如何在flutter中创建一个灵活的(高度)容器?

wko9yo5t  于 2023-10-13  发布在  Flutter
关注(0)|答案(2)|浏览(102)

在我的Flutter应用程序中,我有一行,我有一个文本和容器,文本可以包含任何数量的行。在容器中我有一个公正的颜色,取决于线的数量,容器应 Package 。如何做到这一点?任何帮助将不胜感激。Thanks in advance

我所尝试的是

Row(
        children: [
          Wrap(
            children: [
              Container(
                color: Colors.blue,
                height: 100,  // how to make adjustable height
                width: 2,
              ),
            ],
          ),
          SizedBox(width: 10,),
          Expanded(child: Text('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'))
        ],)

电流输出

预期输出(取决于容器应自动换行的文本高度)

new9mtju

new9mtju1#

我不确定这是否有帮助,但你可以尝试将Row Package 在IntrinsicHeight中,比如

Column(
    children: [
      IntrinsicHeight(
        child: Row(
          children: [
            Container(
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(width: 30, color: Colors.blue,),
                  bottom: BorderSide(width: 30, color: Colors.blue,),
                ),
                color: Colors.blue,
              ),
              width: 2,
            ),
            SizedBox(width: 10,),
            Expanded(child: Text('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'))
          ],),
      ),
    ],
  )
yhuiod9q

yhuiod9q2#

我想这会解决你的问题。

Row(
    children: [
      Expanded(
        child: Container(
          decoration: const BoxDecoration(
            border: Border(
              left: BorderSide(width: 5, color: Colors.blue),
            ),
          ),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Text(
                'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'),
          ),
        ),
      )
    ],
  ),

相关问题