标签: flutter-layout

我有以下代码片段

child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: widget.items
            .map((item) => InkWell(
                  child: Expanded(child: buildIconItem(item)),
                  onTap: ()=>(),
                ))
            .toList(),
      );


This is my IconItem
Widget buildIconItem(IconButtonItem item) {
    Color color = item.disabled
        ? Colors.grey.shade400
        : item.selected
            ? Theme.of(context).accentColor
            : Theme.of(context).textTheme.caption.color;
    TextStyle textStyle = TextStyle(color: color);
    return Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        ImageIcon(item.iconImage.image, size: 35, color: color),
        SizedBox(
          height: 6,
        ),
        Text(item.imageTitle, style: textStyle),
        SizedBox(
          height: 6,
        ),
        Visibility(child: Text(item.subTitle, style: textStyle),
          visible: item.subTitle != null,),
      ], …

我正在使用 TabBar 小部件，我想自定义 TabBar 视图，如下图所示。我尝试了很多次总线，两个选项卡之间有一些空格。

这是我用来自定义选项卡视图的代码。

TabBar(
            controller: _tabController,
            labelColor: Colors.black12,
            unselectedLabelColor: Colors.black12,
            indicatorSize: TabBarIndicatorSize.label,
            tabs: [
              Tab(
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.horizontal(
                        left: Radius.circular(50), right: Radius.zero),
                    border: _tabController.index == 1
                        ? Border.all(color: Colors.black12, width: 2)
                        : Border.all(color: Colors.transparent, width: 2),

                    color: _tabController.index == 0
                        ? Colors.indigo
                        : Colors.white,
                  ),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("Income"),
                  ),
                ),
              ),
              Tab(
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.horizontal(
                        left: Radius.zero, right: Radius.circular(50)),
                    border: _tabController.index == 1
                        ? Border.all(color: Colors.transparent, width: 2) …

我想在从 StreamBuilder 获取数据后显示一个警报对话框。我还有一个要渲染的 UI。目前，当我尝试在返回实际 UI 之前在方法内部构建对话框时，遇到这样的错误_loadUI。

在构建期间调用 setState() 或 markNeedsBuild()。

代码：

if (dataSnapshot.hasData) {
            return dataSnapshot.data ? _loadUI(dataSnapshot.data) : _emptyView();
          }

我刚刚为我的 flutter 小部件成功 flutter-flare

但我找不到将其用于背景（容器）的示例

这可能吗？

我正在尝试实现以下设计，其中列表将是动态的。

想过使用列和行进行一些计算，但老实说现在我一无所知。任何想法、任何建议、任何参考都会很棒。

在此视频中，他们说您可以使用手势识别器在 TextSpan 中创建可点击的链接，但我在 RichText 官方文档和互联网上一般都没有找到示例。有人可以解释一下该怎么做吗？

我有用于选择和取消选择照片的复选框。每次点击都有一个可见的加载屏幕。

_mediaList有照片资产。mediaModel有必要的方法来分别添加和删除选定和取消选定照片的路径。

 Widget build(BuildContext context) {
    super.build(context);
    return GridView.builder(
      itemCount: _mediaList.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, mainAxisSpacing: 4.0, crossAxisSpacing: 4.0),
      itemBuilder: (BuildContext context, int index) {
        final saved = mediaModel.getMedia().contains(
            _mediaList[index].relativePath + '/' + _mediaList[index].title);
        return FutureBuilder(
            future: _mediaList[index].thumbDataWithSize(200, 200),
            builder: (BuildContext context, snapshot) => snapshot.hasData
                ? GridTile(
                    header: saved
                        ? Icon(Icons.check_circle, color: Colors.white,)
                        : Icon(Icons.check_circle_outline, color: Colors.white,),
                    child: GestureDetector(
                        child: Image.memory(
                          snapshot.data,
                          fit: BoxFit.cover,
                        ),
                        onTap: () => setState(() => saved
                            ? mediaModel.removeMedia(
                                _mediaList[index].relativePath +
                                    '/' + …

为了在 Flutter 中练习响应式设计，我决定使用device_preview。我尝试了不同的手机。但每次我都得到原始设备的宽度。

例如，原始设备的 witdh 为 1700px，但模拟设备的 witdh 为 600px。我无法获取模拟设备的宽度。

有什么设置可以解决这个问题吗？或者它基本上是如何运作的？

我想在屏幕顶部底部的两个固定小部件之间创建一个可滚动视图。我的布局如下：

目前我遇到底部溢出错误，如下图所示：

我的目标是固定底部的转到付款按钮，并且模块中视图的其余部分可滚动。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('HEADER'),
          Scrollbar(
            thickness: 5.0,
            radius: Radius.circular(5.0),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                ],
              ),
            ),
          ),
          Text('FOOTER'),
        ],
      ),
    );
  },
);

好的，到目前为止没有问题。我遗漏了isScrollControlled，这样showModalBottomSheet您就无法向上拖动以填满屏幕。我希望它的最大高度为视口高度的一半（我认为这是默认约束？）我还希望它的大小适合其内容，直到达到最大高度。但是，如果我添加更多小部件，SingleChildScrollView Column它就会溢出：

我期望“主体”能够最大化其高度，并在页眉和页脚之间保留剩余空间，并变得可滚动，但它只是变得不受约束。showModalBottomSheet一旦达到高度限制，我该怎么做才能仅使“正文”内容可滚动？