Flutter:获取vericalDivider的小部件相对高度

kmbjn2e3  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我正在构建一个小部件看起来像推特的屏幕,我正在尝试用以下代码实现个人资料图片下的竖条:

Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                VerticalDivider(
                  color: Colors.red,
                  thickness: 10,
                  width: 20,
                ),
                //make a widget that looks like twitter composing tweet
                CircleAvatar(
                  radius: 20,
                  backgroundImage: NetworkImage(user.imageUrls[0]),
                ),
                //add a gray line that runs down the middle of the screen
                VerticalDivider(
                  color: Colors.red,
                  thickness: 10,
                  width: 200,
                ),
              ],
            ),
          ),

它看起来像这样:

正如您所看到的,分隔线是不可见的。使用指定的高度环绕分隔线会使其看起来如下所示:

它现在是可见的,但显然扩展到了小部件的原始大小之外。有没有办法将父级的大小传递到VerticalDivider中,这样我就知道它需要使用多少空间了?
谢谢!

2uluyalo

2uluyalo1#

可以用IntrinsicHeight小部件 Package Row,它将根据最高的子级设置行高(这里是高度为200的容器)。当然,在您的示例中,在布局之前您不知道最高的子容器的大小,我使用容器只是为了给予您一个示例。IntrinsicHeight使用起来相对昂贵,但对于此类用例来说是正确的选择(请参见其docs)。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        children: [
          Container(
            color: Colors.grey,
            child: Column(
              children: [
                SizedBox(
                  child: VerticalDivider(
                    color: Colors.red,
                    thickness: 10,
                    width: 20,
                  ),
                  height: 20,
                ),
                Container(height: 40, width: 40, color: Colors.blue),
                Expanded(
                  child: VerticalDivider(
                    color: Colors.red,
                    thickness: 10,
                    width: 20,
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 200,
            width: 200,
            color: Colors.white,
          )
        ],
      ),
    );
  }
}

相关问题