flutter IntrinsicHeight 与 Column

Question

在我的专栏中，我希望所有孩子的身高都达到孩子的最大身高。 我可以在 Column 中使用 IntrinsicWidth 来实现宽度。但 IntrinsicHeight 在 Column 中不起作用。这是我的代码：

// IntrinsicHeight + Column
// flutter IntrinsicHeight not working with Column
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}
class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('IntrinsicHeight + Column'),backgroundColor: Colors.blue,),
      body: Center(
        child: Container(
          width: 300,
          height: 500,
          color: Colors.amber[50],
          child: IntrinsicHeight(
            child: Column(
              //crossAxisAlignment: CrossAxisAlignment.stretch,
              children: List.generate(5, (i)=>Container(width: (i+1)*10, height: (i+1)*10, color: Colors.green, margin: const EdgeInsets.all(2),)),
            ),
          ),
        ),
      ),
    );
  }
}

IntrinsicHeight 在 Column 中起作用吗？

Answer 1

是的

IntrinsicHeight

可与

Columns

配合使用。

要使

Column

中的孩子的身高与最长的孩子的身高相同，您必须：

用

Column

包裹

IntrinsicHeight

，并用

Expanded

小部件包裹子项。

说明：

• IntrinsicHeight

  ：小部件将确保

  Column

  中的所有子项将占据最高子项的高度。

• Expanded

  小部件可确保所有子级均等扩展以占用 IntrinsicHeight 提供的可用空间。

这里有一段代码显示：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        //brightness: Brightness.dark,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IntrinsicHeight(
          child: Column(
            //crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: Container(
                  height: 10,
                  color: Colors.red,
                  child: const Text('Short widget'),
                ),
              ),
              Expanded(
                child: Container(
                  height: 50,
                  color: Colors.blue,
                  child: const Text('long widget'),
                ),
              ),
              Expanded(
                child: Container(
                  height: 10,
                  color: Colors.green,
                  child: const Text('Short widget'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

这是您编辑的代码，以使小部件的高度相等：

注：

• 我删除了

  Container

  的高度，因此

  Column

  和

  Container

  只取孩子们的高度。

// IntrinsicHeight + Column
// flutter IntrinsicHeight not working with Column
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('IntrinsicHeight + Column'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Container(
          width: 300,
          //height: 500,
          color: Colors.amber[50],
          child: IntrinsicHeight(
            child: Column(
              //crossAxisAlignment: CrossAxisAlignment.stretch,
              children: List.generate(
                5,
                (i) => Expanded(
                  child: Container(
                    width: (i + 1) * 10,
                    height: (i + 1) * 10,
                    color: Colors.green,
                    margin: const EdgeInsets.all(2),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

希望有帮助。