Flutter/ 3 Rows in one Container 或 AlertDialog

Posted 2023-02-23

【中文标题】Flutter/ 3 Rows in one Container 或 AlertDialog

【英文标题】：Flutter/ 3 Rows in one Container or AlertDialog

【发布时间】：2021-07-05 14:48:18

【问题描述】：

我正在尝试制作一个带有导航窗口的警报对话框。应该有 3 行具有不同的 IconButtons 在另一个站点上导航。不幸的是，我是 Flutter 的新手，不知道如何再制作 2 行。有人可以帮帮我吗？甚至有可能做到这一点吗？我的意思是我不能再添加任何孩子，或者我可以吗？我不知道我是否应该将其拆分为 3 个 AlertDialogs 还是那样愚蠢？

That was my Layout for the first Row

This is what it should look like but with 3 lines and not two, so that the code that i have right now can be copied to make 3 identical rows parallel

代码：

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

void popup(BuildContext context) 
  var alertDialog = AlertDialog(
    backgroundColor: Color(0xffb09c84),
    title: Text(''),
    content: Container(
      constraints: BoxConstraints(minWidth: 0, maxWidth: 300, maxHeight: 600),
      padding: EdgeInsets.all(0),
      width: 300.0,
      height: 560.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            children: [
              IconButton(
                icon: FaIcon(
                  FontAwesomeIcons.newspaper,
                  size: 44.0,
                ),
                onPressed: () ,
              ),
              SizedBox(height: 2.0),
              Container(
                child: Text(
                  "       Zeitung",
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ),
            ],
          ),
          Column(
            children: [
              IconButton(
                icon: FaIcon(
                  FontAwesomeIcons.envelope,
                  size: 44.0,
                ),
                onPressed: () ,
              ),
              SizedBox(height: 2.0),
              Container(
                child: Text(
                  "    News",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ),
            ],
          ),
          Column(
            children: [
              IconButton(
                icon: FaIcon(
                  FontAwesomeIcons.creativeCommonsSampling,
                  color: Colors.black,
                  size: 44.0,
                ),
                onPressed: () ,
              ),
              SizedBox(
                height: 3.0,
              ),
              Container(
                child: Text(
                  "   Vertretung",
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );

  showDialog(context: context, builder: (BuildContext context) => alertDialog);


 

【参考方案1】：

这是你的代码：

 Container(
      constraints: BoxConstraints(minWidth: 0, maxWidth: 300, maxHeight: 600),
      padding: EdgeInsets.all(0),
      width: 300.0,
      height: 560.0,
      child: //Row(..the rest you want to copy"

在此行之前添加一列，并复制您的Row 三次：

 Container(
      constraints: BoxConstraints(minWidth: 0, maxWidth: 300, maxHeight: 600),
      padding: EdgeInsets.all(0),
      width: 300.0,
      height: 560.0,
      child: Column( children: [ 
        Row1("..the rest you want to copy"),
        Row2("..the rest you want to copy"),
        Row3("..the rest you want to copy)" 
     ]), //Column
   ), //Container

【讨论】：

首先感谢您的帮助。您能否准确解释一下新行的含义。我会编辑我的问题，因为我认为我问错了。

别提了，这些行是基于您发布的图表。将等待您的更新。

我明白了！我尝试完成 3 行，然后告诉你结果如何，或者我是否有更多问题。非常感谢！

很好，是的，无论如何请更新！随时欢迎您。

效果很好。很高兴你帮助了我！