dart 如何在ListView行中扩展颜色?

5fjcxozz  于 5个月前  发布在  其他
关注(0)|答案(3)|浏览(41)

我已经到了一个简单的应用程序的这个阶段,有点卡住了。我试图制作一个有行的列表视图,以及一个按钮“后面”的行,所以每当你点击列表视图行,它会带你到一个新的屏幕。我注意到每当我向一行添加一个按钮时,该行的颜色突然收缩,而且我不能“扩展”颜色以再次填充整行。我尝试了带有flex属性的Expanded()小部件,但它根本没有任何作用。下面是我需要帮助的代码片段,以及问题的图片。

ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const NewScreen(),
                  ),
                );
              },
              child: Container(
                color: Colors.yellow,
                height: 100.0,
                child: const Center(
                  child: Text('Entry B'),
                ),
              ),
            ),

字符串
正如你所看到的,黄色已经缩小到一个盒子,你可以看到后面的行按钮。我需要黄色完全填补行,如图2所示。


的数据
图片2:你可能会看到更好的在这里。再次,我想黄色看起来像其他3(没有一个按钮分配给他们尚未



我尝试了Expanded()小部件,但它不起作用。

wixjitnu

wixjitnu1#

这不是ElevatedButton的正确用例。你不应该在这里使用ElevatedButton。你可以使用InkWellGestureDetector沿着Container(只是为了得到你的颜色)而不是ElevatedButton。当你有一个实际的按钮时,ElevatedButton应该优先使用。在你的情况下,它只是一个可点击的UI元素。
因此,您可以使用以下代码:

InkWell(
    onTap: (){
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const NewScreen(),
        ),
      );
    },
    child: Container(
      color: Colors.yellow,
      height: 100.0,
      width: MediaQuery.sizeOf(context).width,
      child: const Center(
        child: Text('Entry B'),
      ),
    ),
),

字符串

ecr0jaav

ecr0jaav2#

ElevatedButton有它自己的样式属性,你可以像这样指定按钮的颜色:

ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.yellow,
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const NewScreen(),
                        ),
                      );
                    },
                    child: const Center(
                      child: Text('Entry B'),
                    ),
                  ),

字符串

sg24os4d

sg24os4d3#

有两种方法可以完成任务,使用ElevatedButton或使用Container

ElevatedButton示例

Expanded(
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      shape: const RoundedRectangleBorder(),
      elevation: 0,
      backgroundColor: Colors.yellow,
      maximumSize: const Size.fromHeight(100),
    ),
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const NewScreen(),
        ),
      );
    },
    child: const Text('Entry B'),
  ),
),

字符串

Container示例

Expanded(
  child: InkWell( // or `GestureDetector`
    onTap: (){
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const NewScreen(),
        ),
      );
    },
    child: Container(
      color: Colors.yellow,
      height: 100.0,
      child: const Center(
        child: Text('Entry B'),
      ),
    ),
  ),
),

相关问题