繁体   English   中英

Flutter,根据动态文本调整容器大小

[英]Flutter, size a container according to a dynamic text

我有一个容器,我想将其尺寸设置为与动态文本相同的高度,两者都在 ListBox.builder() 中的 Row() 本身中。 有任何想法吗?

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      decoration: BoxDecoration(
        color: currentOptions.color,
        borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
      ),
      width: w/90,
      child: RotatedBox(
        quarterTurns: -1,
        child: Center(
          child: Text(
            currentOptions.title,
            style: TextStyle(fontFamily: "Conforta", fontSize: h/90, color: Colors.white)
          ),
        ),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(left: w/200, right: w/200, bottom: h/150),
      child: Text(
        currentText,
        style: TextStyle(color: Colors.black, fontSize: h/60),
      ),
    )
  ],
),

在此处输入图像描述

形象的

尝试使用crossAxisAlignment: CrossAxisAlignment.stretch定义您的Row并将其嵌入到 IntrinsicHeight 小部件中:

在此处输入图像描述

完整源代码:

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: [
            IntrinsicHeight(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.blueGrey,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          bottomLeft: Radius.circular(10)),
                    ),
                    width: 90,
                    child: RotatedBox(
                      quarterTurns: -1,
                      child: Center(
                        child: Text('Definition',
                            style: TextStyle(
                                fontFamily: "Conforta",
                                fontSize: 18,
                                color: Colors.white)),
                      ),
                    ),
                  ),
                  Flexible(
                    child: Padding(
                      padding: EdgeInsets.all(16.0),
                      child: Text(
                        Faker().lorem.sentences(4).join(' '),
                        style: TextStyle(color: Colors.black, fontSize: 12),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM