【flutter】篇3

1. 练习网站
2. 这篇文章就尝试把上午所学的东西化为所用
3. 报错“”

Horizontal RenderFlex with multiple children has a null textDirection, so the layout order is undefined.
'package:flutter/src/rendering/flex.dart':
Failed assertion: line 453 pos 18: 'textDirection != null'

原因是因为在使用Row组件的时候，没有外部的MaterialApp包住，所以没有为Row提供默认的方向性
4. Row里面的Column是铺满整个竖屏的，所以说在Row里用crossAxisAlignment是没用的，需要在Column里用mainAxisAlignment才有用
5. 关于“MainAxisSize.min"和"MainAxisSize.max"：应该可以从字面上理解，而且min可以让子元素居中

那么这有什么用呢？可以设置元素在他们主轴上所占空间的大小，是按需分配呀min，还是贪得无厌呀max.而且如果不设置这个属性的话，很可能会报下面这个错：

A RenderFlex overflowed by 99393 pixels on the bottom.

这是因为不确定宽高的Row,column里面装着不确定宽高的Widget导致的，Flutter不知道该用什么样的宽高来渲染widget。在Row(column)里加上这个属性即可
---------------------------------------------------------------------------分割线--------------
源代码如下：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white,
          // border: Border.all(width: 5,color: Colors.pink)
      ),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children:[
            Row(
              textDirection: TextDirection.ltr,
              children: [
                const Padding(
                    padding: EdgeInsets.all(8.0),
                    child:Icon(Icons.account_circle,size: 60,textDirection: TextDirection.ltr,color: Colors.pink,)
                ),
                // Icon(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  textDirection: TextDirection.ltr,
                  children: const [
                    Text(
                      "Flutter McFlutter",
                      textDirection: TextDirection.ltr,
                      style: TextStyle(
                          fontSize: 30,
                          color: Colors.pink
                      ),
                    ),
                    Text(
                        "Experienced App Developer",
                        textDirection: TextDirection.ltr,
                        style: TextStyle(
                            fontSize: 25,
                            color: Colors.pink
                        )
                    )
                  ],
                ),
              ],
            ),
            const SizedBox(height: 8,),
            Row(
              textDirection: TextDirection.ltr,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: const [
                Text("1252782863",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 25,color: Colors.pink),),
                Text("lcqcg666",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 25,color: Colors.pink),)
              ],
            ),
            const SizedBox(height: 8,),
            Row(
              textDirection: TextDirection.ltr,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.accessibility,textDirection: TextDirection.ltr,color: Colors.pink,size: 40,),
                Icon(Icons.timer,textDirection: TextDirection.ltr,color: Colors.pink,size: 40),
                Icon(Icons.phone_android,textDirection: TextDirection.ltr,color: Colors.pink,size: 40),
                Icon(Icons.phone_iphone,textDirection: TextDirection.ltr,color: Colors.pink,size: 40)
              ],
            )
          ]
      ),
    );

  }
}