时间戳

首页 > 解决方案 > 如何使此代码在颤动中响应

flutter - 如何使此代码在颤动中响应

问题描述

如何使下面的代码响应。我希望第二列折叠在第一列之下，第三列折叠在第二列之下。或者让它足够灵敏，让所有东西都可以放在手机屏幕上。目前。它适用于平板电脑或电脑屏幕。

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('sample'),
      ),
      body: Container(
        height: 200,
        width: 2000,
        color: Color(0xff808080),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Contact Us'),
                Row(children: [
                  Icon(Icons.phone),
                  Text('phone')]),
                Row(children: [
                  Icon(Icons.mail),
                  Text('info@test.it')]),
                Row(children: [
                  Icon(Icons.map_outlined),
                  Text('unavailable')]),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Contact Us'),
                Icon(Icons.wrap_text_rounded),
                Icon(Icons.point_of_sale),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Newsletter'),
                Text('Susbcribe'),
              ],
            ),
          ],
        ),
      )
    );
  }
}

标签： flutterdart

解决方案

有很多选择可以让 Flutter 应用程序响应。最好的描述是谷歌自己在https://flutter.dev/docs/development/ui/layout/responsive上的文章，这表明

  • 布局生成器
  • 媒体查询.of()
  • 纵横比
  • 自定义SingleChildLayout
  • 自定义多子布局
  • 装盒
  • FractionallySizedBox
  • 布局生成器
  • 媒体查询
  • 媒体查询数据
  • 方向生成器

作为编写响应式代码的众多方法中的一部分。

推荐阅读